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

Question

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

6

为了在主组件页面上单击主页上的按钮（链接到主组件）时显示对话框组件，我将其作为指令附加到了主模板中。以下是我的实现方式：

在模板中：

<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)设置一些值。如何在当前设置下实现这一点?

- Thai Tran

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Minko Gechev · Accepted Answer

您可以通过以下方法查询视图子组件：

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