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

发布时间：2020-12-17 09:41:42 所属栏目：安全来源：网络整理

导读：所以我们假设你有一个界面有一个工具栏,边栏和一个网格.工具栏有一个下拉菜单,当用户更改时,侧栏和网格中的内容会更改.回到角度1,我将使用一个服务来拥有我所有的动态数据.当服务发生变化时,使用该服务的所有组件也将更新. 在角度2,看起来人们正在使用不同的

所以我们假设你有一个界面有一个工具栏,边栏和一个网格.工具栏有一个下拉菜单,当用户更改时,侧栏和网格中的内容会更改.回到角度1,我将使用一个服务来拥有我所有的动态数据.当服务发生变化时,使用该服务的所有组件也将更新.

在角度2,看起来人们正在使用不同的方法.我想得到你最喜欢的方式的输入.

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

更新 – 03/09/16

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

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

See Plnkr for code

Original Plunker
– 每个变化都有自己的服务

Revised Plunker for example
– 只有一个服务将所有数据存储在对象中.一个类型将被传递给每个监听器,以检查它是否需要根据该类型执行任何操作.

您可以为此使用共享服务.当数据更新时,它可以包含要订阅的数据和可观察数据.

>服务

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!