初始化组件后是否可以传递数据？

Question

我有三个组件，如下图所示，并在我的功能组件中使用自定义表单组件。但是，这两个组件之间并没有直接的父子关系，它们之间还有一个表单组件。

我使用@Input 属性将数据从功能传递到表单，该属性在配置数据中具有输入值（比如说“configData”），然后通过@Input 属性将它们传递给自定义组件（比如说“configData.test”用于测试输入）没有任何问题（我可以在初始化自定义组件时传递每个参数）。但是，在初始化之后，当我设置一个可以在初始化时传递的配置值时，自定义控件不会检测到它。我还尝试为该输入使用 setter，如下所示，并等待捕获 ngOnChanges 方法的更改。如果没有直接的父子关系，我不确定是否可以更新该值，但我避免在可重用的自定义组件中使用服务。那么，解决方案是什么？我是否必须 BehaviourSubject 并通过服务传递价值？

custom-component.ts：

private _test: string;
@Input() set test(value: string) {
    this._test = value;
};
get test() { return this._test; }


ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
    console.log(this.test);
}

这是我的组件的结构：

Answer 1

如果我理解正确，您的 configData 是一个对象，并且您只更新它的一些属性 - 如果是这种情况，您应该知道只有在更改该对象引用时才会触发 angular。

如果这里确实是这种情况，您可以通过以下方式之一克服它：

1. 每次要更改时都重新创建 configData 对象 - configData = { ...configData, newProp: newPropValue }; Angular 会理解这是一个新对象并更新相关输入
2. 您可以添加 DoCheck 生命周期挂钩 - 每次 Angular 运行更改检测时都会运行该挂钩 - 所以请注意这会触发 很多 次
3. 传递输入的不可变变量而不是可变变量 - 传递对象的属性而不是将 configData 作为对象传递
4. 注册一个 observable，每次configData 更改都会触发，然后相应地更新您的组件