Question

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

在Angular 2中，看起来人们正在使用不同的方法。我希望得到你最喜欢的输入方式。

静态服务
OnChanges
输入和输出

已更新 - 03/09/16

看起来最好的解决方案是Thierry 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 ]);

有关详细信息，请参阅此问题：

Answer 2

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

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

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

至少，这是我的看法：）

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

2 个答案: