Angular 2 - 什么相当于根范围？

Question

全部!我有这个组件，当我点击 href 时，如果它是像这样的 Angular 1，它应该将一个变量设置为 Root Scope:

selector: 'my-component'
template : `
            <div (click)="addTag(1, 'abc')">`

constructor() {
    this.addTag = function(id, desc){
        myGlobalVar = { a: id, b: desc};
    };

然后在我的父组件中，页面本身(实际上)我应该做类似的事情:

<my-component></my-component>
<p>My Component is returning me {{ ?????? }}

做这样的事情的最佳方法是什么？

Answer 1

要实现全局变量，您可以实现共享服务。您将能够将数据保存在其中，并且所有组件都可以访问它们。

为此，只需实现一个服务并在引导您的应用程序时设置其提供者:

bootstrap(AppComponent, [ MySharedService ]);

注意不要在要使用它的组件的 providers 属性中再次定义它。

示例

服务:

export class MySharedService {
  data: any;
  dataChange: Observable<any>;

  constructor() {
    this.dataChange = new Observable((observer:Observer) {
      this.dataChangeObserver = observer;
    });
  }

  setData(data:any) {
    this.data = data;
    this.dataChangeObserver.next(this.data);
  }
}

在组件中使用它:

@Component({
  (...)
})
export class MyComponent {
  constructor(private service:MySharedService) {
  }

  setData() {
    this.service.setData({ attr: 'some value' });
  }
}

如果您想通知组件数据已更新，您可以将可观察字段用于共享服务:

@Component({
  (...)
})
export class MyComponent {
  constructor(private service:MySharedService) {
    this.service.dataChange.subscribe((data) => {
      this.data = data;
    });
  }
}

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

• Delegation: EventEmitter or Observable in Angular2

angular.io 网站上的这个页面也可能会让您感兴趣:

• https://angular.io/docs/ts/latest/cookbook/component-communication.html