[英]Angular2. Can I use ViewChild and @Input at the same time?
I need to transfer some data into child element and run function in it. 我需要将一些数据传输到子元素中并在其中运行功能。 I use
ViewChild
for access to the function. 我使用
ViewChild
访问该功能。 But in child childParam
still undefined. 但是在孩子
childParam
仍未定义。
Parent template: 父模板:
<my-modal #myModal [childParam]="parentParam"></my-modal>
Parent component: 父组件:
@ViewChild('myModal') myModal;
parentParam: any;
onSubmit(value: any){
this.parentParam = value;
this.myModal.modalShow();
}
Child component: 子组件:
@Input() childParam: any;
modalShow(){
console.log(this.childParam);
}
Why childParam
is undefined? 为什么未定义
childParam
?
What is better: change directly childParam
by ViewChild
: 更好的是:通过
ViewChild
直接childParam
ViewChild
:
this.myModal.childParam = 'test string';
or send data through function parameters: 或通过功能参数发送数据:
this.myModal.modalShow('test string');
You don't need to set the child parameter through a @ViewChild reference. 您不需要通过@ViewChild引用来设置child参数。
Try this instead. 试试这个吧。 Parent template:
父模板:
<my-modal #myModal [childParam]="parentParam"></my-modal>
Parent component: 父组件:
private parentParam: any;
onSubmit(value: any){
this.parentParam = value;
this.myModal.modalShow();
}
The value of parentParam will bind to the childParam value directly in this way so whenever the parentParam value is updated it will be available in the child component. parentParam的值将以这种方式直接绑定到childParam值,因此,每当更新parentParam值时,它将在子组件中可用。
If that does not work then try and add ngOnChanges to the child component since you will then be able to debug (set a breakpoint) for whenever the value is updated from the parent: 如果那不起作用,则尝试将ngOnChanges添加到子组件,因为每当从父组件更新值时,您就可以调试(设置断点):
Import OnChanges (add this in addition to the other imports you have from @angular/core): 导入OnChanges(除了从@ angular / core导入的其他导入外,还添加以下内容):
import { OnChanges} from '@angular/core';
Add NgOnChanges to your child component class: 将NgOnChanges添加到您的子组件类中:
export class MyChildComponent implements OnChanges {
Implement method ngOnChanges. 实现方法ngOnChanges。 This method will be called whenever an input parameter is changed:
只要更改输入参数,就会调用此方法:
ngOnChanges(changes: any) {
debugger; //set breakpoint
}
When this.parentParam = value;
当
this.parentParam = value;
is executed in onSubmit()
then Angular first needs to run change detection for bindings to get updated. 在
onSubmit()
执行,然后Angular首先需要运行更改检测以使绑定得到更新。
Angular runs change detection when an event handler has completed. 事件处理程序完成后,Angular运行更改检测。 Which in your case is
onSubmit()
which means that childParam
will get the value
passed after onSubmit()
was executed. 在您的情况下是
onSubmit()
,这意味着childParam
将在执行onSubmit()
之后获取传递的value
。
What you could do is to run change detection explicitely 您可以做的是明确运行更改检测
constructor(private cdRef:ChangeDetectorRef) {}
onSubmit(value: any){
this.parentParam = value;
this.cdRef.detectChanges();
// here `value` is assigned to `childParam`
this.myModal.modalShow();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.