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

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

Delegation: EventEmitter or Observable in Angular2

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属性通过名为@Input的指令myBinding属性传递到子指令的范围。

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

Answer 3

您可以使用有角度的BehaviorSubject和asObservable

来实现此目的

检查以下示例代码

服务档案

@Injectable()
export class commonService {
    private data = new BehaviorSubject('');
    currentData = this.data.asObservable()

    constructor() { }

    updateMessage(item: any) {
        this.data.next(item);
    }

}

组件1

设置任何组件的数据

 constructor(private _data: commonService) { }
 shareData() {
      this.currentValue = this.queryTerm;
      this._data.updateMessage(this.currentValue);
  }

从任何组件收听

constructor(private _data: commonService) { }
ngOnInit() {
        this._data.currentData.subscribe(currentData => this.currentValue = currentData)
    }

您可以使用这种方式在任何组件之间进行通信。

More Info 和其他7 methods

Angular 2 - 什么相当于Root Scope？

3 个答案: