在Angular中，您可以使用 @ Input() 装饰器将数据从父组件传递到子组件，子组件可以使用 @ Output() 装饰器向父注释发出事件。
您可以了解更多关于 @ Input() 装饰器这里和关于 @ Output装饰器这里。
这篇博客文章的目的是向您解释它是通过引用传递还是在 @ Input() 和 @ Output装饰器的上下文中通过值传递。
首先，让我们假设我们有两个组件，如下所示:
从 “@ angular/core” 导入 { Component，Input}；@ Component({'app-video' 选择器，模板: “”{{data.counter}} {{count}}' })导出videoponent类 { @ Input() data: any;@ Input() count: number; }
如您所见，我们有两个输入属性。
- 在data属性中，我们将传递一个对象。
- 在count属性中，我们将传递一个数字。
从AppComponent中，我们为两个属性传递值，如下所示:
从 “@ angular/core” 导入 { Component，OnInit}； @ Component({'app-root' 选择器，模板: “”<app-video [data]= 'data' [count]= 'count' ></app-video>' })AppComponent实现OnInit导出类 {数据: any = {}；count: 个数；构造函数 () {} ngOnInit() {这个 .data.counter = 1;这个 .count = 1;}}
如您所见，我们正在将data (object) 和count( number) 传递给子组件。由于数据作为对象传递，它将是 “通过引用传递”，并且由于count作为number传递，它将是 “通过值传递”。
因此，如果传递对象，数组等，那么它是通过引用传递的，对于像number这样的原始类型，它是通过值传递的。
为了更好地理解它，让我们在子组件上引发两个事件，如下面的清单所示:
从 '@ angular/core' 导入 { Component，Input，EventEmitter，Output}；@ Component({'app-video' 选择器，模板: “”{{data.counter}} {{count}}<button (click)= senddata()'> 发送数据 </button><button (click)= sendcount()'> 发送计数 </button>' })导出videoponent类 { @ Input() data: any;@ Input() count: number; @ Output() dataEvent = 新EventEmitter()；@ Output() countEvent = new EventEmitter(); senddata() {这个 .dataEvent.emit( this .data); }sendcount() {这个 .countEvent.emit( 此 .count)；} }
在这两个事件中，我们都将相同的 @ Input() 修饰属性传递给父组件。在dataEvent中，数据被传递回，在countEvent中，count被传递回父组件。
在父组件中，我们捕获事件如下:
从 “@ angular/core” 导入 { Component，OnInit}； @ Component({'app-root' 选择器，模板: “”<app-video [data]= 'data' [count]= 'count' (dataEvent)= 'updateData($ event)' (countEvent)= 'updateCount($ event)' ></app-video>' })AppComponent实现OnInit导出类 {数据: any = {}；count: 个数；构造函数 () {} ngOnInit() {这个 .data.counter = 1;这个 .count = 1;} updateData(d) {d.计数器 = d.计数器1；console.log( 此 .data.counter)；} updateCount(c) {c = c 1;console.log( 此 .count)；}}
让我们谈谈updateData和updateCount函数。这些函数捕获在子组件上引发的事件。
在updateData函数中，我们正在递增传递的参数的值，但是，由于它是一个对象，它将更新this.data的值，并且在子组件中，将呈现更新的值。
在updateCount函数中，我们正在递增传递的参数的值，但是，由于它是原始类型，因此不会更新this.count，并且在子组件中，不会发生任何影响。
作为点击按钮的输出，你会发现数据的值是递增的，但计数的值不递增。
我们可以总结一下，如果我们在 @ Input() 装饰器中传递对象，那么它将作为引用传递，如果我们传递原始类型，那么它将作为值传递。我希望你觉得这篇文章有用。谢谢你的阅读。
如果你喜欢这篇文章，请分享。另外，如果您还没有签出为Angular组件点燃UI,一定要这样做!他们有30个基于材料的角度组件，以帮助您更快地编写web应用程序。
</p