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

Angular 2 - 如何从Component访问指令

1 个答案: