Angular2 - Ссылка на шаблон внутри NgSwitch

Question

У меня есть шаблон NgSwitch. В NgSwitch я хочу получить ссылку на шаблон для инициализированного шаблона. Что-то вроде этого:

<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> 

При нажатии на кнопке в компоненте Я хочу позвонить в инициализируется компоненту (первый/второй/третья) к способу (который определен на интерфейсе, что все эти три компонента реализации) , Проблема заключается в том, что ViewChild не определен. Если переместить #REF в контейнер DIV, например:

<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> 

ViewChild (ссылка шаблон) инициализируется, но тогда я могу вызвать метод компонента.

Как использовать директиву NgSwitch и ссылочную переменную шаблона? Или, с другой стороны, как я могу вызвать инициализированный компонент из его родителя (в случае, когда я перемещаю #ref в контейнер div).

Answer 1

Это работает, если вы используете эталонный шаблон переменной в ngSwitchCase, таким образом:

<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> 

Обратите внимание, что, если у вас есть:

export class SomeComponent { 

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

Тогда ref еще не установлена ​​на уровне, когда вызывается конструктор. Даже не по init. Только после просмотра init.

Таким образом, с помощью следующего компонента:

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); 
    } 

} 

Выход:

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

См demo plunker here.

Answer 2

Контрольная переменная шаблона не должна работать со структурной директивой. Здесь объясняется причина: Thomas Hilzendegen's blog

Мое решение состоит в том, чтобы создать ссылочную переменную шаблона для тега контейнера, где используется [ngSwitch], а затем доступ к его дочернему элементу с использованием его дочернего свойства. Например,

<div [ngSwitch]="..." [class.error] = "(elem.children.item(0).className.indexOf('someClass') !== -1" #elem> 
... 
</div>