Question

我不能在子组件代码中使用父母给定的值。我不明白为什么在我的父HTML中，我设置了一个带有标签值（value1）的组件app-courses-array

<app-courses-array [eventHashtag]="value1"></app-courses-array>

我的孩子的HTML正常工作，并且事件井号显示得很好。

<div class="panel-heading">
      Hashtag received {{ eventHashtag }}
</div>

但是当我尝试在子组件代码中获取它（使用它做其他事情）时，我只会得到“未定义”：

export class CoursesArrayComponent {

   @Input() eventHashtag: string;

   constructor() {
       console.log("Value of hashtag", this.eventHashtag);
       // this displays "Value of hashtag undefined" on the console
   }
}

有什么主意吗？

Answer 1

这是通常的情况，在设置视图之前，不会初始化Input属性。您可以使用ngOnInit方法访问数据。

 ngOnInit() {
    console.log(this.eventHashtag); 
 }

Answer 2

它将在--- - hosts: worker gather_facts: no tasks: - name: Run worker shell: long-time task args: chdir: ~ register: out - debug: var: out中不可用。它将在constructor中可用。当组件上的ngOnChanges属性更改时，就会调用该方法。

尝试将其记录在

中

@Input

此外，实现Angular提供的ngOnChanges() { console.log(this.eventHashtag); }生命周期挂钩。您可能要从OnChanges

导入

@angular/core

Answer 3

您是通过get请求或其他方式检索此value1数据吗？如果是这样，可能是因为在收到value1数据之前已加载组件。为了解决这个问题，您可以像这样向app-courses-array添加* ngIf：

<app-courses-array *ngIf="value1" [eventHashtag]="value1"></app-courses-array>

现在，仅当未定义value1数据时才加载组件。（未定义等于false）

这里的链接解释了构造函数和ngOninit之间的区别，并且还可以解释为什么变量显示为未定义：https://toddmotto.com/angular-constructor-ngoninit-lifecycle-hook简而言之，构造函数是ECMA6（javascript）的一部分，而不是angular的一部分。它用于初始化其主体中的常规变量，但您也可以通过将其声明为构造函数参数来使用它向类中注入角度分量

从子代码获取@Input（）值返回未定义

3 个答案: