Angular2 - NgSwitch 中的模板参考 [英] Angular2 - Template reference inside NgSwitch

问题描述

我有一个 NgSwitch 模板.在 NgSwitch 中，我想获得对初始化模板的模板引用.像这样:

 
<first-component #ref *ngSwitchCase="0"></first-component><second-component #ref *ngSwitchCase="1"></second-component><third-component #ref *ngSwitchCase="2"></third-component>

当单击组件中的按钮时，我想调用初始化组件(第一个/第二个/第三个)的方法(在所有这三个组件实现的接口上定义).问题是 ViewChild 未定义.如果我将#ref 移动到容器 div，如下所示:

<first-component *ngSwitchCase="0"></first-component><second-component *ngSwitchCase="1"></second-component><third-component *ngSwitchCase="2"></third-component>

ViewChild(模板引用)已初始化，但随后我可以调用组件的方法.

如何同时使用 NgSwitch 指令和模板引用变量?或者另一方面，如何从其父级调用已初始化的组件(在我将 #ref 移动到容器 div 的情况下).

解决方案

如果您在 ngSwitchCase 中使用模板引用变量，它会起作用，这样:

<first-component #ref *ngSwitchCase="0"></first-component><second-component #ref *ngSwitchCase="1"></second-component><third-component #ref *ngSwitchCase="2"></third-component>

请注意，如果您有:

export class SomeComponent {@ViewChild('ref') ref;...

然后在调用构造函数时还没有设置 ref.甚至在 init 上都没有.仅在查看初始化之后.

这样，使用以下组件:

导出类 AppComponent 实现 OnInit、AfterViewInit {模型 = {类型:0}；@ViewChild('ref') ref;构造函数(){console.log('constructor:', this.ref);}ngOnInit() {console.log('ngOnInit:', this.ref);}ngAfterViewInit() {console.log('AfterViewInit:', this.ref);}}

输出为:

构造函数:未定义ngOnInit:未定义AfterViewInit: FirstComponent {...}

在此处查看演示plunker.

I have a NgSwitch template. In the NgSwitch I want to get a template reference to the initialized template. Something like this:

    <div class="container" [ngSwitch]="model.type">
        <first-component #ref *ngSwitchCase="0"></first-component>
        <second-component #ref *ngSwitchCase="1"></second-component>
        <third-component #ref *ngSwitchCase="2"></third-component>
    </div>

When clicking on a button in the component I want to call to the initialized component (first/second/third) to a method (which defined on an interface that all these 3 component implement). The problem is the ViewChild is undefined. If I move #ref to the container div, like this:

<div class="container" #ref [ngSwitch]="model.type">
    <first-component *ngSwitchCase="0"></first-component>
    <second-component *ngSwitchCase="1"></second-component>
    <third-component *ngSwitchCase="2"></third-component>
</div>

The ViewChild (template reference) is initialized but then I can call the method of the component.

How can I use both NgSwitch directive and template reference variable? Or on the other hand, how can I call the initialized component from its parent (in a case I move the #ref to the container div).

解决方案

It works if you use a template reference variable at the ngSwitchCase, this way:

<div class="container" [ngSwitch]="model.type">
    <first-component #ref *ngSwitchCase="0"></first-component>
    <second-component #ref *ngSwitchCase="1"></second-component>
    <third-component #ref *ngSwitchCase="2"></third-component>
</div>

Notice that, if you have:

export class SomeComponent {

  @ViewChild('ref') ref;
...

Then ref is not yet set at when the constructor is called. Not even on init. Only after view init.

This way, with the following component:

export class AppComponent implements OnInit, AfterViewInit {
  model = {type: 0};

  @ViewChild('ref') ref;

  constructor() {
    console.log('constructor:', this.ref);
  }
  ngOnInit() {
    console.log('ngOnInit:', this.ref);
  }
  ngAfterViewInit() {
    console.log('AfterViewInit:', this.ref);
  }

}

The output is:

constructor: undefined
ngOnInit: undefined
AfterViewInit: FirstComponent {...}

See demo plunker here.

这篇关于Angular2 - NgSwitch 中的模板参考的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！