在模板语法中，我们知道存在着本地变量这种语法，可以使用本地变量来代表对应的组件。虽然父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，不过这种使用方式只能在模板中使用，例如如下所示，改写上面例子中的父组件模板，代码如下。
我们在ParentComponent组件中使用本地变量#child获取了child组件的实例，这样就可以在模板中使用其属性或者方法，例如child.input。
@Component({ selector: 'parent', template: '<child [input]="data" (output)="output($event)" #child></child>{{child.input}}' }) export class ParentComponent implements OnInit { data: string; constructor() { } ngOnInit() { this.data = "parent"; } output($event){ console.log($event); } }
7. ViewChild
本地变量的方式是在父组件的模板中获取子组件的实例，有木有其他方式可以在组件的类中获取子组件的实例呢？答案是肯定的，如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。当父组件类 需要这种访问时，可以把子组件作为ViewChild，注入到父组件里面。例如，我们改造上面的父组件的组件类，使用ViewChild来获取子组件的实例，代码如下：
@Component({ selector: 'parent', template: '<child [input]="data" (output)="output($event)" #child></child>{{child.input}}' }) export class ParentComponent implements OnInit { @ViewChild(ChildComponent) private childComponent: ChildComponent; data: string; constructor() { } ngOnInit() { this.data = "parent"; } output($event) { console.log($event); } }
在以上的代码中，我们使用@ViewChild(ChildComponent)注解的形式获取了对应子组件childComponent的实例，这样在父组件类中就可以调用子组件对应的属性及方法了。
相对于本地变量的方式而言，ViewChild的方式更加灵活，用途也比较广泛。但是，需要注意的一点是，必须等待父组件的视图显示完成后才可以使用，因此，ngAfterViewInit 生命周期钩子是非常重要的一步。
8. 服务方式
通过服务依赖注入的方式，我们可以了解到，服务在父子组件之间是可以共享的，因此，我们可以利用共享的服务的形式在父子组件之间进行通信。
如果我们将服务实例的作用域被限制在父组件和其子组件内，这个组件子树之外的组件将无法访问该服务或者与它们通讯。
一般来说，父子之间使用服务的方式来通行，是采用事件消息的形式来实现的。
例如，如下的代码中，父子组件中共享了Service服务，并在各自的类中获取了Service服务的实例，当分别点击父子组件中的按钮时，就能够触发Service服务中的对应的input$以及output$，因为服务是共享的，所以在父子组件中监听对应的服务信息，就能够得到传递的消息。
@Injectable() export class Service { input$: EventEmitter<string> = new EventEmitter<string>(); output$: EventEmitter<string> = new EventEmitter<string>(); constructor() { } } @Component({ selector: 'child', template: ` <button (click)="click()">click for output</button> ` }) export class ChildComponent { constructor(private _service: Service) { this._service.input$.subscribe(function (input: string) { console.log(input); }) } click() { this._service.output$.emit('i am from child'); } } @Component({ selector: 'parent', template: '<child></child><button (click)="click()">click for input</button>', providers: [Service] }) export class ParentComponent { constructor(private _service: Service) { this._service.output$.subscribe(function (output: string) { console.log(output); }) } click() { this._service.input$.emit('i am from child'); } }
总结
以上所述是小编给大家介绍的Angular2 组件交互实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: