Angular子组件接收父组件数据时初始化获取值异常问题

这是Angular开发中非常常见的生命周期时机问题，我来给你拆解清楚原因和解决办法：

为什么构造函数里拿不到@Input的值？ #

Angular组件的生命周期是有顺序的：构造函数执行 → Angular完成@Input属性绑定 → 组件初始化完成。你在constructor里打印this.article时，Angular还没来得及把父组件传递的值绑定到子组件的@Input属性上，所以自然是undefined。而模板能正常渲染，是因为模板会在数据绑定完成后才进行更新渲染，这时候article已经有值了。

另外顺便提一句：你的组件selector拼错了，是article-root不是aricle-root，虽然不影响当前问题，但建议修正避免后续组件引用出错。

三种解决办法，按需选择 #

1. 用ngOnInit钩子（最适合初始化时仅处理一次的场景）

ngOnInit是Angular提供的生命周期钩子，会在组件初始化完成、所有@Input属性绑定完成后触发，正好适合在这时候处理传入的数据：

import {Component, Input, OnInit} from '@angular/core';
@Component({
  selector: 'article-root',
  template: '<li>{{article}}</li>'
})
export class Article implements OnInit {
  @Input() article: object;
  
  constructor() {
    // 这里依然是undefined，时机不对
  }

  ngOnInit(): void {
    console.log(this.article); // 现在能正常拿到父组件传递的值了！
    // 这里可以做你需要的其他数据处理逻辑
  }
}

2. 用@Input的setter方法（适合监听数据变化的场景）

如果父组件可能会更新article的值，你需要每次值变化时都触发处理逻辑，可以用setter来包裹@Input属性：

import {Component, Input} from '@angular/core';
@Component({
  selector: 'article-root',
  template: '<li>{{article}}</li>'
})
export class Article {
  private _article: object;

  @Input() set article(value: object) {
    this._article = value;
    console.log(this._article); // 每次article的值变化都会执行这里的逻辑
    // 比如做数据格式化、状态更新等操作
  }

  get article(): object {
    return this._article;
  }

  constructor() {
  }
}

3. 用ngOnChanges钩子（适合多Input属性或需要监听变化细节的场景）

如果你有多个@Input属性，或者需要知道数据变化前后的具体值，可以用ngOnChanges钩子：

import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
@Component({
  selector: 'article-root',
  template: '<li>{{article}}</li>'
})
export class Article implements OnChanges {
  @Input() article: object;
  
  constructor() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 检查article属性是否发生变化
    if (changes['article']) {
      console.log('当前值:', changes['article'].currentValue);
      console.log('变化前的值:', changes['article'].previousValue);
      // 这里处理数据逻辑
    }
  }
}

内容的提问来源于stack exchange，提问作者Все Едно