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

【问题标题】：Unable to pass value from parent to child component in angular 9无法在角度 9 中将值从父组件传递到子组件
【发布时间】：2020-07-08 05:43:16
【问题描述】：

基本上情况是，我正在使用 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;
  }

孩子 =>

 @Input() name: any;
 ngOnChanges() {
    if (this.name) {
      console.log('users name is ', this.name);    //<--this never prints.
    }
  }

但是每当我在孙子组件中执行点击事件时，值都会完美地达到其祖父级。但在那之后，我无法将它放入另一个孩子，即最终目的地；）

提前致谢。

【问题讨论】：

1.将getName($event) 替换为getName(event)，控制器中不需要$。 2. 请在getName(event) 中创建event 的console.log 并将结果发布到问题中。
@Michael D 谢谢你的回复。正如你所说，我已经做出了改变。但我没有在那个孩子身上得到那个价值 :)
我已经发布了答案。请看看它是否适合你。

标签： angular typescript

【解决方案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);
  }
  .
  .
}

【讨论】：