Question

我使用自定义DataService角度服务来获取一些强类型MultiLanguageText数据，并将其保存在phrase字段中。然后，我想使用@Input将其传递给子组件。

我尝试在ngOnInit和ngOnChanges生命周期（请参阅代码）钩子中加载数据，但在这两种情况下，我的子组件都会收到undefined。

当对phrase值进行硬编码时，它会起作用，这告诉我，在我已经向子组件发送undefined值后，数据是从服务加载的。

相关类型

export class MultiLanguageText {
  de: string;
  fr: string;
  en: string;
}

父模板：

<child-component [phrase]="this.phrase">
</child-component>

父组件代码：

/* imports & meta data omitted for readability */

export class ParentComponent implements OnChanges {

  phrase: MultiLanguageText;

  constructor(private dataService: DataService) {}

  ngOnChanges(): void {
    this.dataService.getData().then((d) => {
      this.phrase = d;
      console.log(this.phrase); // logs correct data
    });
  }
}

子模板：

<p>{{this.phrase.en}}</p>

子组件代码：

/* imports & meta data omitted for readability */

export class ChildComponent {

  @Input() phrase: MultiLanguageText;

  constructor() {
    console.log("phrase equals: ", this.phrase); // logs `undefined`, why?
  }
}

更新1：已添加ngOnChanges关注儿童成分：

子组件代码：

/* imports & meta data omitted for readability */

export class ChildComponent {

  @Input() phrase: MultiLanguageText;

  constructor() {
    console.log("phrase equals: ", this.phrase); // logs `undefined`
  }

  ngOnChanges(): void {
    console.log("phrase equals: ", this.phrase); // logs correct data, yay!
  }
}

到目前为止，我现在可以从子组件的控制器访问正确的数据了。但是，在模板中它仍然使用“原始”undefined值，如何强制模板使用新的可用有效数据？

更新2：使用方法获取phrase.en数据

正如@Riron所指出的，phrase变量是异步设置的，因此构建子节点时，phrase的值仍为undefined。只要加载phrase数据，就可以在模板中使用它。我解决这个问题的方法是在控制器中使用一个方法：

getPhrase = () => {
    return this.phrase === undefined ? "" : this.phrase.en;
}

然后我会从模板中调用：

<p>{{ getPhrase() }}</p>

Answer 1

您的phrase变量是异步设置的，因此构建子项时，phrase的值仍为undefined。

如果在子组件而不是父组件上实现ngOnChanges，您应该会看到某个时刻出现的值（不是在第一次检查时）：

export class MotivationalDriversFormComponent {

  @Input() phrase: MultiLanguageText;

  ngOnChanges() {
    console.log("phrase equals: ", this.phrase);
  }
}

和

export class ParentComponent implements OnChanges {

  phrase: MultiLanguageText;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.dataService.getData().then((d) => {
      this.phrase = d;
      console.log(this.phrase); // logs correct data
    });
  }
}

Answer 2

1）当您使用组件中的参数时，您不需要使用它。

 <child-component [phrase]="this.phrase"></child-component>

2）同样是绑定。

<p>{{phrase}}</p>

Answer 3

正如@Riron所指出的，phrase变量是异步设置的，因此构建子节点时，phrase的值仍为undefined。只要加载phrase数据，就可以在模板中使用它。我解决这个问题的方法是在控制器中使用一个方法：

getPhrase = () => {
    return this.phrase === undefined ? "" : this.phrase.en;
}

然后我会从模板中调用：

<p>{{ getPhrase() }}</p>

从服务加载数据并使用@Input

3 个答案: