Question

如果我有对象，我会在某处读到：

test{
test:'aaa'
}

如果我有两个组成部分：

<component1></component1>和<component2></component2>

如果我有

@Input() input;

所以，如果我有这样的事情：

如果我更改了component2上此输入中的值，对象将在没有服务和发射的情况下在两个组件上发生更改。这有可能吗？它是如何运作的？

Answer 1

如果您的结构如下：

<parent>
  <child1 [input]="hero"></child1>
  <child2 [input]="hero"></child2>
</parent>

更改父级中的英雄属性会更改两个子级，但更改child1中的英雄不会在child2中更改它（没有你所说的发射器）。你可能会更好地创建一个服务来保存属性并通过它们的构造函数将它注入到两个子组件中。

Answer 2

如果您希望嵌套组件内的更改传播，则需要在嵌套组件中使用@Output和EventEmitter才能使其正常工作。为了使嵌套组件中的更改能够在同一父组件中实现另一个嵌套组件，需要通知父组件更改。 Angular并没有真正设置在不使用服务的情况下以任何其他方式完成它。

子组件

@Input() input;
@Output() inputChanged = new EventEmitter<any>

someFunction() {
    this.inputChanged.emit('changed');
}

父组件HTML

<parentComponent>
    <childComponent1 [inputProperty]="input" (inputChanged)="parentFunction($event)"></childComponent1>
    <childComponent2 [inputProperty]="input" (inputChanged)="parentFunction($event)"></childComponent2>
</parentComponent>

Angular Documentation非常清楚。

执行此操作的另一种方法是创建一个全局可用于整个应用程序的单例服务，或仅创建组件所在的模块。您可以使用Subject或BehaviorSubject执行此操作。

同时更改两个组件上的对象值？

2 个答案: