Angular 2-如何从Component访问指令

Question

我附加了一个对话框组件作为指令，以便在单击主页面上的按钮（链接到主组件）时在主组件页面上显示它。我就是这样做的

在模板中

<button id="goToTasksCases" class="btn btn-success btn-lg" (click)="doShowStartNewCase($event)">START A NEW CASE</button>
<modal-new-case></modal-new-case>

在组件中

@Component({
    selector: 'case-index'
})
@View({
    templateUrl: 'client/app/case/case.index.html',
    directives : [ModalNewCaseComponent]
})
export class CaseIndexComponent {
    doShowStartNewCase(event: any) {
        // how can I access the ModalNewCaseComponent
    }    
}

但是，在从Rest服务进行一些回调之后，我需要为子组件（ModalNewCaseComponent）设置一些值。如何使用当前设置实现这一点？

Answer 1

您可以通过以下方式查询视图子项：

@Component({
    selector: 'case-index',
    templateUrl: 'client/app/case/case.index.html',
    directives : [ModalNewCaseComponent]
})
export class CaseIndexComponent {
    @ViewChild(ModalNewCaseComponent)
    modal: ModalNewCaseComponent;
    afterViewInit() {
        // this.modal will have value
    }
    doShowStartNewCase(event: any) {
        // how can I access the ModalNewCaseComponent
    }    
}

你可以在这里找到更多关于ViewChildren和ContentChildren的信息。