组件交互

在本课中，您将学习 Angular 中组件的通信方式，尤其是父组件与子组件之间的通信。

父子组件交互

组件通常需要共享数据。父组件可以使用输入属性向子组件传递数据。

使用 @Input()

使用 @Input() 装饰器从父组件接收数据：

@Input() userData: string;

向子组件传递数据

在父组件模板中，使用属性绑定传递数据：

<app-child [userData]="parentData"></app-child>

子组件与父组件通信

子组件使用带有 @Output() 装饰器的事件向父组件传递信息。

使用 @Output()

创建事件发射器，将数据从子组件发送到父组件：

@Output() dataEvent = new EventEmitter<string>();

发出事件

从子组件发出事件：

sendData() {
  this.dataEvent.emit('Hello from Child');
}

在父组件中监听事件

在父组件模板中处理发出的事件：

<app-child (dataEvent)="handleEvent($event)"></app-child>

总结

现在您已经了解了组件如何通过输入和输出在 Angular 中进行交互。请继续练习！