呼叫嵌套组件功能angular2

Question

想象一下这样的主机组件代码：

@Component({ 
    directives: [nestedComponentDirective] 
}) 

export class ParentComponent { 
    save():void { 
      this.myService.myHTTPCall().subscribe((event) => { 
       // if callback successfull we need to let directive know 
      }) 
     } 

现在嵌套组件：

@Component({ 
    selector: 'someSelector', 
    template: ` 
    <div> 
    <button [stuff]="stuff"</button> 
    </div>` 
}) 


export class ContinuationCheckDirective { 
    @Input() waitingForHostedComp(value) { 
    console.log ("value", value) 
    } 

如何从主机的组件（父）调用waitingForHostedComp？

Answer 1

您可以这样做的方式是使用ViewChild，即我们将子组件注入父代作为ViewChild。

import { ViewChild } from '@angular/core'; 
import { Component } from '@angular/core'; 
import { ChildComponent } from './child.component'; 

@Component({ 
    selector: 'parent-component', 
    template: ` implements AfterViewInit 
    <child-component></child-component> 
    `, 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 
    @ViewChild(ChildComponent) 
    private childComponent: ChildComponent; 

    save(): void { 
     this.myService.myHTTPCall().subscribe((event) => { 
      this.childComponent.waitingForHostedComp(event); 
     }) 
    } 

} 

你可以在Component Interaction Cookbook: Parent Calls a ViewChild看到更多详细信息。