将数据传递给其他组件的最佳方法是什么

时间:2016-10-11 12:29:35

标签: javascript angular typescript

我正在尝试将用户信息对象传递给所有低级组件, 问题是即使他们是孙子,将它传递给情人组件的最佳方法是什么? 如果@input可以工作或者有其他方式传递它吗?

我的根组件代码是:

  constructor(private _state: GlobalState,
              private _imageLoader: BaImageLoaderService,
              private _spinner: BaThemeSpinner,  public af: AngularFire) {

    this._loadImages();

    this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
      this.isMenuCollapsed = isCollapsed;
    });

    // this.af.auth.subscribe(
    //   user => this._changeState(user),

    this.af.auth.subscribe( user => this._changeState(user));

  }

1 个答案:

答案 0 :(得分:3)

您是否考虑过创建服务类?它们是单例,因此该类的相同实例会被注入到每个要求它的组件中。

https://angular.io/docs/ts/latest/guide/dependency-injection.html

一个简单的看起来像这样

import { Injectable } from '@angular/core';

@Injectable()
export class DummyService {
    public userInfo: UserInfo = {
        //User stuff goes here
    };
}

你可以将它添加到这样的组件中。

import {DummyService} from 'dummy.service';

@Component({
  selector: 'my-component',
  templateUrl: 'my.component.html'
})
export class MyComponent{
  constructor(private myDummyService: DummyService){}
}

在运行时,这会将同一个类实例注入到您注入的每个组件中。因此,它是跨多个组件同步数据的超级便捷方式。