Angular 组件之间的交互的示例代码

在Angular应用开发中，组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景，也就是让两个或多个组件之间交互的方法。 根据数据的传递方向，分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。 父组件向子组件传递 子组件通过@Input装饰器定义输入属性，然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据，子组件可通过setter或ngOnChanges()来截听输入属性值的变化。 先定义两个组件，分别为子组件DemoChildComponent和父组件DemoParentComponent. 子组件： @Component({ select 在Angular框架中，组件间的通信是应用程序中至关重要的部分，因为它们构成了应用的基本构建块。在上述示例中，我们探讨了三种主要的组件交互方式：父组件向子组件传递数据、子组件向父组件传递数据以及通过服务共享数据。我们将深入分析这三种方法。 1. **父组件向子组件传递数据** 这种通信方式是通过Angular的`@Input()`装饰器实现的。子组件定义输入属性，然后父组件在模板中通过这些属性将数据绑定到子组件。例如，子组件`DemoChildComponent`有两个输入属性`paramOne`和`paramTwo`： ```typescript @Component({ selector: 'demo-child', template: `<p>{{paramOne}}</p><p>{{paramTwo}}</p>` }) export class DemoChildComponent { @Input() paramOne: any; @Input() paramTwo: any; } ``` 父组件`DemoParentComponent`通过模板中的属性绑定将数据传递给子组件： ```typescript @Component({ selector: 'demo-parent', template: `<demo-child [paramOne]='paramOneVal' [paramTwo]='paramTwoVal'></demo-child>` }) export class DemoParentComponent { paramOneVal: any = '传递给paramOne的数据'; paramTwoVal: any = '传递给paramTwo的数据'; } ``` 2. **通过setter监听输入属性值的变化** 当需要在输入属性值变化时执行某些操作时，可以使用setter方法。在子组件`DemoChildComponent`中，为`paramOne`属性创建一个setter，这样每次属性值改变时，都会触发setter并执行相应的逻辑： ```typescript @Component({ selector: 'demo-child', template: `<p>{{paramOneVal}}</p><p>{{paramTwo}}</p>` }) export class DemoChildComponent { private paramOneVal: any; @Input() set paramOne(val: any) { this.paramOneVal = val; // 执行其他操作 } get paramOne() { return this.paramOneVal; } @Input() paramTwo: any; } ``` 3. **通过`ngOnChanges()`监听输入属性值的变化** `ngOnChanges()`是Angular生命周期钩子之一，它会在输入属性变化时被调用。如果需要监听多个输入属性的变化，`ngOnChanges()`更为合适。在`DemoChildComponent`中实现`OnChanges`接口，并覆盖`ngOnChanges()`方法： ```typescript @Component({ selector: 'demo-child', template: `<p>{{paramOneVal}}</p><p>{{paramTwo}}</p>` }) export class DemoChildComponent implements OnChanges { private paramOneVal: any; @Input() set paramOne(val: any) { this.paramOneVal = val; } get paramOne() { return this.paramOneVal; } @Input() paramTwo: any; ngOnChanges(changes: SimpleChanges) { // 对所有变化的输入属性进行处理 for (const propName in changes) { if (changes[propName].previousValue !== changes[propName].currentValue) { console.log(`属性${propName}的值已更改`); // 在这里执行相应的操作 } } } } ``` 这三种方式提供了灵活的数据传递机制，可以根据具体需求选择合适的方法。`@Input()`适用于简单的数据传递，setter适合在值变化时执行特定操作，而`ngOnChanges()`则用于同时处理多个输入属性的变化。了解和熟练掌握这些交互方式是开发高效Angular应用的关键。