Angular2组件通信：输入输出与实例共享

"Angular2组件间的通信方法包括父组件向子组件传递数据的`@Input()`方式和子组件向父组件传递数据的`@Output()`事件发射器方式，以及通过`@Host`注解实现子组件获取父组件实例的机制。" 在Angular2中，组件间的通信是应用功能扩展的关键部分。下面我们将详细探讨三种主要的通信方式： 1. 父组件到子组件的通信：使用`@Input()` 这种方式是通过属性绑定将父组件的数据传递给子组件。首先，我们定义一个名为`Child`的子组件，它有一个`@Input()`装饰器修饰的`content`属性： ```typescript import { Component, Input } from 'angular2/core'; @Component({ selector: 'child', template: '<h2>child {{content}}</h2>' }) class Child { @Input() content: string; } ``` 然后在父组件`App`中，我们可以将`Child`组件嵌入模板，并通过方括号`[]`将`content`属性绑定到父组件的某个变量： ```typescript @Component({ selector: 'App', directives: [Child], template: ` <h1>App</h1> <child [content]="i"></child> ` }) export class App { i: number = 0; constructor() { setInterval(() => { this.i++; }, 1000) } } ``` 在这个例子中，`i`变量的值会实时更新并传递给子组件的`content`属性。 2. 子组件到父组件的通信：使用`@Output()`事件发射器 子组件可以通过`@Output()`装饰器定义一个事件，当事件触发时，可以将数据发送回父组件。例如，创建一个`Child`组件，它有一个`updateNumberI`事件发射器： ```typescript @Component({ selector: 'child', template: '<h2>child</h2>' }) class Child { @Output() updateNumberI: EventEmitter<number> = new EventEmitter<number>(); i: number = 0; constructor() { setInterval(() => { this.updateNumberI.emit(++this.i); }, 1000) } } ``` 父组件可以监听这个事件并执行相应的处理函数： ```typescript @Component({ selector: 'App', directives: [Child], template: ` <h1>App {{i}}</h1> <child (updateNumberI)="numberIChange($event)"></child> ` }) export class App { i: number = 0; numberIChange(i: number) { this.i = i; } } ``` 这样，每当子组件的`updateNumberI`事件触发时，父组件的`numberIChange`函数会被调用，更新其自身的`i`值。 3. 子组件获取父组件实例：使用`@Host`和`@Inject` 当需要在子组件中直接访问父组件的实例时，可以利用`@Host`和`@Inject`注解。首先，我们需要在父组件中定义一个服务，然后在子组件中注入该服务来获取父组件的实例。由于这里没有提供具体的代码示例，这部分通常涉及到更复杂的依赖注入机制，包括使用`forwardRef`等技术来解决循环依赖问题。 这三种方式为Angular2组件间的通信提供了灵活的选择，可以根据实际需求选择最合适的方法。在构建大型应用时，理解并熟练掌握这些通信机制至关重要。