2016-12-13 2 views
0

У меня есть 2 компонента одноуровневые в Angular2:Как передать ссылку на компонент в Input с * ngIf Angular2

<test1 *ngIf="data" [data] = "makes" #test1R></formModel> 
<testing *ngIf="data" [test1Ref]="test1R"></testing> 

Компонент "Тестирование" имеет функцию, вызывать функцию test1 компонента:

export class Testing{ 

    @Input() test1Ref: test1Component; 
    constructor() { } 

    testFunction($event){ 
     this.test1Ref.hello(); 
    } 

Моя проблема заключается в том, что this.test1Ref не определен, потому что компонент test1 имеет * ngIf (<test1 *ngIf="data"),
, но без * ngIf У меня есть ошибка в компоненте test1 для входного значения ([data] = "makes").
Как передать ссылку на компонент с * ngIf

ответ

1

Одним словом, вы не можете. Вам нужно будет скрыть компонент, если !data, таким образом ваша локальная переменная # test1R будет по-прежнему установлена.

<test1 [hidden]="!data" [data]="makes" #test1R></test1> 

Тогда нулевой чек внутри test1 в ngOnInit(), чтобы избежать исключения.

Если вы можете выполнить только определенный код, как только данные установки, сделать это следующим образом:

Объявите данные в качестве входных данных внутри вашего test1 компонента:

export class Test1 { 
    @Input() data: any; 
} 

Объявив его как @Input каждый раз изменения значения, угловые будут называть ngOnChanges, так что теперь вы можете сделать это:

ngOnChanges(changes: SimpleChanges) { 
    if(changes['data'] && changes['data'].currentValue) { 
    //Do something once data is set. 
    } 
} 
+0

О, я понимаю, мне не нравится, потому что, если я получить данные с асинхронным вызовом, проверьте, существует ли данные в ngInit всегда бесполезен. Мне нужно обработать какое-то событие? – LorenzoBerti

+1

Обновлен ответ, чтобы показать, как обрабатывать нулевую проверку для async. – Baconbeastnz

+0

Хорошо, спасибо! :) – LorenzoBerti

Смежные вопросы