首页 文章

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

提问于
浏览
16

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

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

  • 静态服务

  • OnChanges

  • 输入和输出


Updated - 03/09/16

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

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

See Plnkr for code

Original Plunker - 每次更改都有自己的服务

修改后的Plunker例如 - 只有一个服务将所有数据存储在对象中 . 将向每个侦听器传递一个类型,以检查它是否需要根据该类型执行任何操作 .

2 回答

  • 22

    您可以利用共享服务 . 它可以包含要订阅的数据和可观察数据,以便在更新数据时得到通知 .

    • Service
    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
    @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
    bootstrap(AppComponent, [ ListService ]);
    

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

  • 2

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

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

    当组件本身发生变化时,您可以使用 ngOnChanges 来执行某些操作,但我更喜欢使用 get()set() 函数 .

    至少,这是我对它的看法:)

相关问题