Angular2 - 如何在组件之间共享数据/更改

因此，假设您有一个包含工具栏，边栏和网格的界面。该工具栏有一个下拉菜单，当用户更改时，侧边栏和网格中的内容会发生变化。回到Angular 1，我会使用服务来获得我所有的动态数据。当服务中的某些内容发生变化时，使用该服务的所有组件也会更新。Angular2 - 如何在组件之间共享数据/更改

那么在Angular 2中，它看起来像人们使用不同的方法。我想得到你的意见，哪个是首选的方式。

静态服务
OnChanges
输入和输出

更新 - 16年3月9日

看起来像最好的解决方案就是线程蒂埃里Templier发布：Delegation: EventEmitter or Observable in Angular2

我剩下的问题是，如果最好的做法是为组件之间共享的每个数据项创建新服务，或者我们只需要一个具有存储所有共享数据的对象的服务。

See Plnkr for code

Original Plunker - 每一次变化都会有自己的服务

Revised Plunker for example - 只有一个服务存储对象中的所有数据。一个类型将被传递给每个侦听器，以检查它是否需要根据该类型进行任何操作。

来源

2016-03-08 Marin Petkov

其他人提供了很好的答案，但要注意，是的一个部分关于[组件交互]的文档（https://angular.io/docs/ts/latest/cookbook/component-communication.html）同样值得一读。 – jandersen

你可以利用这个共享服务。它可以包含数据和可观察数据以供订阅，以在数据更新时得到通知。

服务

export class ListService { 
    list1Event: EventEmitter<any> = new EventEmitter(); 

    getLists() { 
    return this.http.get(url).map(res => res.json()) 
     .subscribe(
     (data) => { 
      this.list1Event.emit(data.list1); 
     } 
    ); 
    } 
}

元器件

@Component({ 
    selector: 'my-component1', 
    template: ` 
    <ul> 
    <li *ngFor="#item of list">{{item.name}}</li> 
    </ul> 
    ` 
}) 
export class MyComponent1 { 
    constructor(private service:ListService) { 
    this.service.list1Event.subscribe(data => { 
     this.list = data; 
    }); 
    } 
}

自举

bootstrap(AppComponent, [ ListService ]);

详情请参见这个问题：

来源

2016-03-08 21:38:13

优秀的答案，但正如您已经链接到eventemitter或可观察论坛所指出的，它看起来像可观察是更好的方法。我现在就试试看看它是如何为我工作的。 –

在您的使用案例中，我会使用服务。服务用于将其数据传送给其他组件。一个组件可以将这些数据更新到服务中，另一个组件可以从中读取数据。或者这两个组件都可以从中读取数据，而服务器本身从“外部世界”获取数据。

您使用input将数据从父项传递给子项，并使用output将子项的事件输出到父项。

使用ngOnChanges可以在组件本身发生某些变化时执行某些操作，但我更喜欢使用get()和set()函数。

至少，这是我的承担:)

来源

2016-03-08 21:31:12 PierreDuc

感谢您对何时使用每一个的精彩描述。这对我来说将来非常方便。我将使用@Thiery提到的EventEmitter vs Observable线程中提到的Observable服务方法。 –

所以我有一个关于你何时使用事件vs ngOnChanges的描述的后续问题。假设我有一个使用共享的childComponent网格的父组件。通过共享，我的意思是多个其他组件使用这个网格来显示他们自己的数据。所以如果我想让父组件在这个子（网格）内部调用一个函数，但是只有在这个实例中不是所有其他的，那么ngOnChanges会是这种情况的最佳用法吗？ –

Angular2 - 如何在组件之间共享数据/更改

回答

相关问题