基本情况是,我正在使用EventEmitter将变量的值上移到其祖父母组件(直到现在可以正常工作)。
但是一旦值到达祖父母,我想将该值传递给它的另一个子组件。我在子组件上使用@input name:string
来做。但不知道为什么我无法在该子组件中获得该名称。
父母=>
//html code
<personal-section (childName)="getName($event)"></personal-section>
<profile-section [name]="name"></name>
//inside profile.ts
getName($event) {
console.log(this.name); // <--- upto this console, program works fine
this.name= $event;
}
child =>
@Input() name: any;
ngOnChanges() {
if (this.name) {
console.log('users name is ', this.name); //<--this never prints.
}
}
但是,每当我在孙子组件中执行click事件时,价值就完美地达到了其祖父母。但是在那之后我无法在另一个孩子那里得到它,即最终目的地;)
谢谢。
答案 0 :(得分:1)
用getName($event)
替换控制器中的getName(event)
仅是一个约定问题。
此外,如果您只想将name
变量从一个孩子发送到另一个孩子,则可以这样做,而无需使用自定义变量让父母参与。尝试以下
父模板
<personal-section (childName)="profileSection1.setName($event)"></personal-section>
<profile-section #profileSection1></name>
然后可以从“配置文件部分”组件中的@Input
属性中删除name
装饰器。
个人资料部分的组成部分
export class ProfileSectionComponent implements OnInit {
name: any;
public setName(name: any) {
this.name = name;
console.log('User name is ', this.name);
}
.
.
}