Angular2. Могу ли я одновременно использовать ViewChild и @Input?

Question

Мне нужно перенести некоторые данные в дочерний элемент и запустить в нем функцию. Я использую ViewChild для доступа к функции. Но у ребенка childParam все еще не определено.

шаблон Родитель:

<my-modal #myModal [childParam]="parentParam"></my-modal> 

Родитель компонент:

@ViewChild('myModal') myModal; 
parentParam: any; 

onSubmit(value: any){ 
    this.parentParam = value; 
    this.myModal.modalShow(); 
} 

Детский компонент:

@Input() childParam: any; 

modalShow(){ 
    console.log(this.childParam); 
} 

Почему childParam не определено?

Что лучше: изменение непосредственно childParam по ViewChild:

this.myModal.childParam = 'test string'; 

или отправить данные через параметры функции:

this.myModal.modalShow('test string'); 

Answer 1

Когда this.parentParam = value; выполнен в onSubmit() затем Радиально-первых необходимо запустить обнаружение изменений для привязки, чтобы получить обновление.

Угловые пробеги изменяют обнаружение, когда обработчик события завершен. Что в вашем случае - onSubmit(), что означает, что childParam получит valueпослеonSubmit() был выполнен.

Что вы могли бы сделать, это запустить обнаружение изменений явно

constructor(private cdRef:ChangeDetectorRef) {} 

    onSubmit(value: any){ 
    this.parentParam = value; 
    this.cdRef.detectChanges(); 
    // here `value` is assigned to `childParam` 
    this.myModal.modalShow(); 
    } 

Plunker example

Answer 2

Вам не нужно, чтобы установить параметр ребенка через ссылку @ViewChild ,

Попробуйте это вместо этого. Родитель шаблон:

<my-modal #myModal [childParam]="parentParam"></my-modal> 

Родитель компонент:

private parentParam: any; 

onSubmit(value: any){ 
    this.parentParam = value; 
    this.myModal.modalShow(); 
} 

Значение parentParam связывается со значением childParam непосредственно таким образом, так что всякий раз, когда значение parentParam обновляется она будет доступна в компоненте ребенка.

Если это не сработает, то попробуйте добавить ngOnChanges к компоненту ребенка, так как вы тогда будете в состоянии отладки (установить контрольную точку) для всякий раз, когда значение обновляется от родителя:

Импорт OnChanges (добавить это в дополнение к другим импорта вы имеете от @ угловом/ядра):

import { OnChanges} from '@angular/core'; 

Добавить NgOnChanges к вашему ребенку класса компонента:

export class MyChildComponent implements OnChanges { 

Implemen t метод ngOnChanges. Этот метод будет вызываться всякий раз, когда входной параметр изменяется:

ngOnChanges(changes: any) { 
    debugger; //set breakpoint 
}