Angular5发送@Input下一组组件

Question

在组件 1 中，我做了这样的事情：

<app-child-one [foo]="foo">

然后我可以在 ngOnInit 中很好地使用该值。但是在 child 的 HTML 中，它也想使用它再次通过：

<app-grandchild [foo]="foo">

因为 app-grandchild 是在 foo 实际绑定之前设置的，所以控制器得到一个 null 值。我该如何以正确的方式执行此操作，以便一直传递绑定值？

Answer 1

您可以使用 setter 输入而不是尝试访问 onInit

像这样：

@Input()
set foo(value) {
   //do whatever with value that you would do onInit
}

现在 setter 将在每次输入值更改时运行而不是仅在 Init

上查看它

如果你还需要获取foo，那么你也加一个getter即可，可以使用局部变量存储

private _foo;
@Input()
set foo(value) {
   this._foo = value;
   //do whatever with value that you would do onInit
}
get foo() {
   return this._foo;
}

它看起来有点冗长，但可以让您处理这样的情况：您的输入变量可能在初始化之后的某个时间被设置，并且您需要对该值执行其他操作。这里的其他选择是使用稍后的生命周期挂钩（afterviewinit？）或使用共享服务而不是输入。我不建议尝试使用稍后的生命周期挂钩，这可能是目前最快的修复方法，但它会使您的组件具有隐藏的时序依赖性，以后可能会更改并以意想不到的方式破坏您的组件。

Angular5发送@Input下一组组件

Angular 5 send @Input down a set of components

angular

angular5