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

Question

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

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

• 静态服务
• OnChanges
• 输入和输出

---

更新 - 16年3月9日

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

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

See Plnkr for code 

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

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

Answer 1

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

• 服务

  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 ]); 
  

详情请参见这个问题：

• Delegation: EventEmitter or Observable in Angular2
• Delegation: EventEmitter or Observable in Angular2
• Is possible to have two template for single call service in AngularJS 2

Answer 2

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

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

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

至少，这是我的承担:)