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

Question

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

在Angular 2中,看起来人们正在使用不同的方法.我希望得到您的输入,这是首选方式.

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

---

更新 - 03/09/16

看起来最好的解决方案是Thierry Templier发布的帖子:委托:Angular2中的EventEmitter或Observable

我剩下的问题是,最佳做法是为组件之间共享的每个数据项创建新服务,还是只有一个服务具有存储所有共享数据的对象.

import {Component} from 'angular2/core';
import {NavService} from '../services/NavService';

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservingComponent {
  item: number;
  subscription: any;
  constructor(private _navService:NavService) {}
  ngOnInit() {
    this.item = this._navService.navItem();
    this.subscription = this._navService.navChange$.subscribe(
      item => this.selectedNavItem(item));
  }
  selectedNavItem(item: number) {
    this.item = item;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'my-nav',
  template:`
    <div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
    <div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div>
  `,
})
export class Navigation {
  item = 1;
  constructor(private _navService:NavService) {}
  selectedNavItem(item: number) {
    console.log('selected nav item ' + item);
    this._navService.changeNav(item);
  }
}

@Component({
  selector: 'my-app',
  template: `{{title}}
  <p>
  <my-nav></my-nav>
  <button (click)="showObsComp = !showObsComp">toggle ObservingComponent</button>
  <div *ngIf='showObsComp'>
    <obs-comp></obs-comp>
  </div>
  `,
  directives: [Navigation, ObservingComponent]
})
export class AppComponent {
  title = "Angular 2 - event delegation";
  showObsComp = true;
  constructor() { console.clear(); }
}

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

有关详细信息,请参阅此问题:

• 委托:Angular2中的EventEmitter或Observable
• 委托:Angular2中的EventEmitter或Observable
• 在AngularJS 2中可以有两个用于单个呼叫服务的模板