Angular 2 - 什么相当于Root Scope？

Question

所有!我有这个组件,当我点击href它应该设置一个变量作为根范围,如果它是Angular 1像这样:

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

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

• 委托:Angular2中的EventEmitter或Observable

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

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

Answer 2

在Angular2中,范围的概念现在等同于成员变量和@Input组件或指令的属性.当它们引用DOM元素时,可绑定属性还包括DOM元素本身的那些属性或属性.

在Angular1中,您可以$rootScope在深度嵌套的子范围内定义范围变量并在其中引用它,而不会因为范围继承的原型性质而将其显式传递给指令.在Angular2中,没有范围继承.如果要将数据从父组件的作用域传递到直接子作用域,则必须通过指令的@Input绑定显式地执行此操作.例如<directive [myBinding]="model"></directive>,一个model在父组件scope属性正在通过指令的传递到孩子指令的范围@Input属性调用myBinding.

最接近$ rootScope的是@Thierry的答案:使用共享服务来检索和改变数据,这些数据可以通过DI注入任何组件.与具有全局注射器的Angular1不同,Angular2引入了层级注射器的概念.组件分层链中的每个组件都可以定义它自己的注入器.在Angular2中,注入器的层次结构参与类型解析,其方式类似于使用$ scope继承在Angular1中解析$ scope变量.