@Input 属性在 Angular 2 的 onInit 中未定义

typescript

在Angular 2中，@Input 属性是一种强大的机制，用于在父组件和子组件之间传递数据。通过 @Input 装饰器，我们可以将数据从父组件传递到子组件，实现组件之间的通信。然而，在某些情况下，可能会遇到在子组件的 ngOnInit 生命周期钩子中访问 @Input 属性却未定义的情况。

这种情况可能出现在组件初始化的过程中，尤其是当父组件试图传递数据给子组件时。如果在子组件的 ngOnInit 方法中访问 @Input 属性，而此时父组件尚未传递相应的数据，就会导致 @Input 属性未定义。

为了更好地理解这个问题，让我们通过一个简单的案例来说明。

typescript
// 父组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: <code>
    <app-child [inputData]="parentData"></app-child>
  </code>
})
export class ParentComponent {
  parentData: string = 'Hello from Parent!';
}

在这个例子中，父组件通过 @Input 属性将数据传递给子组件。子组件的代码如下：

typescript
// 子组件
import { Component, Input, OnInit } from '@angular/core';
@Component({
  selector: 'app-child',
  template: <code>
    <div>{{ childData }}</div>
  </code>
})
export class ChildComponent implements OnInit {
  @Input() inputData: string;
  childData: string;
  ngOnInit() {
    // 在这里访问 @Input 属性
    this.childData = this.inputData; // 这里可能出现未定义的情况
  }
}

在上述代码中，子组件试图在 ngOnInit 生命周期钩子中访问 @Input 属性 inputData。然而，由于父组件传递数据的时机，可能导致在 ngOnInit 中 inputData 未定义，从而引发错误。

解决方法

为了解决这个问题，我们可以使用 ngOnChanges 生命周期钩子来监视 @Input 属性的变化。这样，我们可以确保在输入属性发生变化时更新子组件的状态。

让我们修改子组件的代码：

typescript
// 子组件
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-child',
  template: <code>
    <div>{{ childData }}</div>
  </code>
})
export class ChildComponent implements OnChanges {
  @Input() inputData: string;
  childData: string;
  ngOnChanges(changes: SimpleChanges) {
    if ('inputData' in changes) {
      this.childData = this.inputData;
    }
  }
}

通过使用 ngOnChanges，我们可以安全地访问 @Input 属性，确保在数据传递时及时更新子组件的状态。这样，就能有效地避免在 ngOnInit 中访问未定义的 @Input 属性的问题。