Angular子组件如何访问父组件传递的@Input绑定变量

问题根因 #

1. 类属性访问语法错误：子组件var2的setter方法中直接写var1属于访问当前作用域的局部变量，而var1是组件类的实例属性，必须通过this.var1才能正确访问。
2. 输入属性赋值时序差异：Angular 初始化组件时会按模板中输入属性的声明顺序依次赋值，如果你模板中[var2]写在[var1]之前，var2的setter触发时var1还未完成赋值，所以取值为undefined。而ngOnInit生命周期钩子是在所有输入属性完成首次赋值后才触发的，因此这里可以正常拿到var1的值。

额外隐藏问题：父组件中var1初始值为undefined，后续直接调用push方法会抛出运行时异常，需要先初始化空数组。

修复方案 #

基础语法修正 #

所有实例属性访问统一添加this前缀，同时修复父组件var1初始化问题：
父组件修改：

@Component({
  ...,
  template: `<child [var1]="var1" [var2]="var2"><child>`
})
export class ParentComponent implements OnInit {
  // 初始化空数组，避免后续push报错
  var1: any[] = [];
  var2: any;

  ngOnInit(): void {
    this.dataService.subscribe(data => {
      this.var1.push(data);
    });
  }
}

时序问题处理 #

可以根据需求选择以下任意一种方案：

方案1：在setter中加就绪判断

如果逻辑只依赖var2的变化触发，可以在setter中判断var1是否已赋值，再执行对应操作：

@Component({
  selector: 'child',
  ...
})
export class ChildComponent implements OnInit{
  @Input() var1: any;

  private var2Value: any;
  @Input() get var2(): any {
    return this.var2Value;
  }
  set var2(val){
    this.var2Value = val;
    // 先判断var1是否已赋值
    if (this.var1) {
      console.log(this.var1);
      // 此处写你的业务逻辑
    }
  }

  ngOnInit(): void {
    console.log(this.var1);
  }
}

方案2：用ngOnChanges统一监听输入变化

如果需要同时响应两个变量的变更，可以用ngOnChanges生命周期钩子统一处理：

import { OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'child',
  ...
})
export class ChildComponent implements OnInit, OnChanges{
  @Input() var1: any;
  @Input() var2: any;

  ngOnChanges(changes: SimpleChanges): void {
    // 两个变量都有值时才执行逻辑
    if (this.var1 && this.var2) {
      console.log(this.var1, this.var2);
      // 此处写你的业务逻辑
    }
  }

  ngOnInit(): void {
    console.log(this.var1);
  }
}

内容的提问来源于stack exchange，提问作者r669