无法在角度9中将值从父级组件传递到子级组件

时间:2020-03-27 13:15:06

标签: angular typescript

基本情况是,我正在使用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事件时,价值就完美地达到了其祖父母。但是在那之后我无法在另一个孩子那里得到它,即最终目的地;)

谢谢。

1 个答案:

答案 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);
  }
  .
  .
}