Angular - 在同级组件之间共享数据而不在实例之间共享
Angular - Share Data Between Sibling Components Without Sharing Between Instances
我正在编写一个包含三个独立组件的模块。这些组件协同工作,因此使用服务来帮助跟踪所有内容是有意义的。
|
|- wrapper.component.ts
|
|- wrapper.service.ts
|
|- wrapper.module.ts
|
|- child-component1.component.ts
|
|- child-component2.component.ts
问题是,如果您在应用程序中创建两个基础组件实例,服务会在两个组件实例之间共享数据。
在同级之间共享数据而不在组件的所有实例之间共享数据的正确方法是什么?
在组件级别提供服务:
@Component({
....
providers: [myService]
})
这样,服务实例在组件及其子组件之间共享,但组件的其他实例不共享。
- 您可以使用从 child 1 个组件到 parent
的事件发射器发出事件
- 将输入从 parent 更改为 child 2,数据从 child 1
发出
- 访问child2
的ngOnChange中的数据
我正在编写一个包含三个独立组件的模块。这些组件协同工作,因此使用服务来帮助跟踪所有内容是有意义的。
|
|- wrapper.component.ts
|
|- wrapper.service.ts
|
|- wrapper.module.ts
|
|- child-component1.component.ts
|
|- child-component2.component.ts
问题是,如果您在应用程序中创建两个基础组件实例,服务会在两个组件实例之间共享数据。
在同级之间共享数据而不在组件的所有实例之间共享数据的正确方法是什么?
在组件级别提供服务:
@Component({
....
providers: [myService]
})
这样,服务实例在组件及其子组件之间共享,但组件的其他实例不共享。
- 您可以使用从 child 1 个组件到 parent 的事件发射器发出事件
- 将输入从 parent 更改为 child 2,数据从 child 1 发出
- 访问child2 的ngOnChange中的数据