如何在組件中定義“全局”變量？ （角度4）

Question

我有一個app-editor-component ，它的結構中包含很多嵌套的組件。 加載組件后，它將創建一個數組： obj_list : MyObject[]

許多嵌套組件將包含一個<select>元素，其中必須在每個obj_list中選擇一個元素。

如何與結構中的所有元素共享此列表？

Answer 1

在嵌套組件之間共享數據的一種方法是Input / Output + EventEmitter系統。

或者，您可以使用共享服務在組件之間傳輸數據。 這是官方文檔的鏈接，以及來自Firebase的有關組件交互的好帖子：

文件

發布

例如，您可以通過Input將obj_list從app-editor-component傳遞到子組件，然后在子組件中觀察<select>的change事件，並將更改發回到app-editor-component 。

但是，如果您具有深層嵌套，則使用服務是更好的方法

Answer 2

幾個嵌套組件共享的實體應該是服務。 這自然是由Angular分層注射器提供的。

更重要的是，如果應該異步更改數據，則應以某種方式通知組件。 這可以通過RxJS observables方便地完成：

import { Subject } from 'rxjs/Subject';

@Injectable()
class Foo {
  objListSubject = new Subject();
  objList$ = this.objListSubject.asObservable();
}

@Component({
  providers: [Foo] // belongs to NgModule providers if the service is global
  ...
})
class ParentComponent {
  constructor(private foo: Foo) {
    ...
    this.foo.next(['bar']);
  }
}

@Component({
  template: `
    <select ...>
      <option *ngFor="foo.objList$ | async">
    </select>
  `,
  ...
});
class ChildComponent {
  constructor(public foo: Foo) {}
}