在 Angular 开发中，组件之间的数据传递是非常常见的操作。本文将介绍 Angular 中常用的组件之间的传值方式及它们的优缺点。本文中的示例代码基于 Angular 10。
1. 父组件向子组件传值
父组件向子组件传值的方式有两种：@Input 和模板变量。
1.1 @Input
@Input 装饰器用来定义一个输入属性，它用于从父组件向子组件传递值。在子组件中通过装饰器获取父组件传递的值。
- 父组件：
<app-child [data]="data"></app-child>
export class ParentComponent {
data = '我是父组件的数据';
}- 子组件：
export class ChildComponent {
@Input() data: string;
}优点：
- 父组件和子组件解耦，具有更好的可重用性。
缺点：
- @Input 只适用于父组件向子组件传递值。如果要实现双向绑定，则需要使用另一个装饰器 @Output。
1.2 模板变量
模板变量是通过在模板中使用 # 加名称定义的变量，用于在组件和模板之间进行交互。
- 父组件：
<app-child #child></app-child> <button (click)="child.showData()">显示子组件的数据</button>
- 子组件：
export class ChildComponent {
data = '我是子组件的数据';
showData() {
console.log(this.data);
}
}优点：
- 简单易用，适用于只需要在父组件中控制子组件的行为而不需要获取其值的情况。
缺点：
- 无法进行数据绑定和双向绑定。
2. 子组件向父组件传值
子组件向父组件传值的方式有两种：@Output 和 EventEmitter。
2.1 @Output
@Output 装饰器用来定义一个输出属性，它用于从子组件向父组件传递值。在子组件中使用 EventEmitter 触发父组件的事件。
- 父组件：
<app-child (dataUpdated)="onDataUpdated($event)"></app-child>
export class ParentComponent {
onDataUpdated(data: string) {
console.log(data);
}
}- 子组件：
-- -------------------- ---- -------
------ - ------------- ------ - ---- ----------------
------ ----- -------------- -
--------- ----------- - --- -----------------------
------------ -
----------------------------------
-
-优点：
- 可以实现双向数据绑定，解决了 @Input 的缺点。
缺点：
- 需要在子组件中触发父组件的事件，导致父子组件之间耦合度增加。
2.2 EventEmitter
EventEmitter 是一种用于创建自定义事件的机制。它允许您在组件树中引发事件，并可以被其他组件或服务订阅。
- 父组件：
<app-child></app-child> <button (click)="child.showData()">显示子组件的数据</button>
export class ParentComponent {
onDataUpdated(data: string) {
console.log(data);
}
}- 子组件：
-- -------------------- ---- -------
------ - ------------- ------ - ---- ----------------
------ ----- -------------- -
---- - -----------
----------- - --- -----------------------
---------- -
---------------------------------
-
-优点：
- 子组件独立，不存在与父组件耦合的问题。
缺点：
- 无法进行数据绑定和双向绑定。
总结
以上是 Angular 中常用的父子组件间的数据交互方式，每种方式都有其优缺点。您需要根据自己的需求选择合适的方式。
在实际开发中，可能会遇到更复杂的组件之间的数据传递问题，例如兄弟组件之间的传值，跨级组件之间的传值等。这时，您可以使用共享服务、路由参数等方式解决这些问题。
以上的内容只是 Angular 中组件之间的数据传递的一个简单介绍，希望能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fcecc48841e9894df64ad