Question

这个组件：

export class ChildComponent {
  @Input()
  child: Child;

  mychild: Child = { 
    id: this.child.id,
    name: this.child.name: 
  };
}

返回此错误：

TypeError: undefined is not an object (evaluating 'this.child.id')

@Input目标对象的属性是否在组件中自动可用？

Answer 1

mychild属性在组件构造函数中分配。此时绑定不可用。

Lifecycle hooks存在使这成为可能。据参考，

ngOnInit

在Angular初始化之后初始化指令/组件   数据绑定输入属性。

ngOnChanges

在Angular设置数据绑定输入属性后响应。方法   接收当前值和先前值的更改对象。

执行顺序是

ngOnChanges
     在ngOnInit之前和数据绑定输入属性值发生变化时
。

ngOnInit

在第一次ngOnChanges之后。

所以它应该是

export class ChildComponent implements OnInit {
  @Input()
  child: Child;

  mychild: Child;

  ngOnInit() {
    this.mychild = { 
      id: this.child.id,
      name: this.child.name: 
    };
  }
}

如果child输入在初始化后不应该被更改，否则应该使用ngOnChanges挂钩。

上面的代码似乎是多余的，因为this.child在初始化后已经可用，可以直接使用而不是this.mychild。

使用组件访问@input目标对象的属性

1 个答案: