Angular 2 - 如何从组件访问指令

Question

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

在模板中

<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

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

@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 and ContentChildren here 的更多信息。

Angular 2 - 如何从组件访问指令

Angular 2 - How to access directives from Component

typescript

angular