从父组件向子组件发送get属性值的角度

Question

我有一个父组件，它将把值从get属性发送到子组件。发送到子组件的值显示在同一父HTML页面中，但子组件无法访问。

尝试使用新方法，尝试了所有生命周期以从父组件中获取值，这没有任何帮助，我也尝试了使用Viewchild，但在某种程度上都没有帮助我获取值。

parent.component.ts

get name(): string {
 return this.service.name.toLocaleLowerCase(); // returns the name Eg: Tom
}

parent.component.html

<child [name]="name"></child>
name::: {{name}} <!--display name as Tom in the parent HTML-->

child.component.ts

@Input() name: string;
 constructor() {
  console.log(name); // logs unknown
}

以上console.log显示为未知

我尝试在ngOnInit方法内进行console.log-显示未知 我尝试使用ngOnChanges（changes：SimpleChanges）-但由于某种原因，该值不是第一次打印，而是第二次打印，这是没有用的。 有人可以建议吗？

我需要在构造方法中获取输入值。

Answer 1

我认为在初始化服务的名称变量值之前已加载了子组件。 检查服务的值是否已初始化，然后加载您的子组件。

尝试

<child [name]="name" *ngIf="this.service.name"></child> 

Answer 2

我们必须使用@Input关键字访问this值

@Input() name: string;
 constructor() {
  console.log(this.name); //value passed from parent to the child
}

Answer 3

1. 您必须使用在其中设置输入的life cycle hook。例如ngOnChanges或ngOnInit

2. 要访问javascript / typescript中的成员（类）变量，您必须使用this对其进行限定。

  @Input() name: string;

  ngOnInit() {
    console.log(this.name); // logs unknown
  }