如何定义＆＃34;全球＆＃34;组件中的变量？ （Angular4）

Question

我有一个app-editor-component，其中包含很多嵌套组件。加载组件后，它会创建一个数组：obj_list : MyObject[]

许多嵌套组件将包含<select>元素，其中必须在每个元素中选择obj_list中的一个元素。

如何与结构中的所有元素共享此列表？

Answer 1

在嵌套组件之间共享数据的一种方法是输入/输出+ EventEmitter系统。

或者，您可以使用共享服务在组件之间传输数据。 以下是官方文档的一些链接以及firebase关于组件交互的好帖子：

Docs

Post

例如，在您的情况下，您可以通过obj_list将app-editor-component从Input传递到子组件，然后在子组件中观察<select>更改事件并将更改发回app-editor-component。

但是，如果你有深度嵌套，使用服务是更好的方法

Answer 2

由多个嵌套组件共享的实体应该是一个服务。这通过角度分层注射器自然提供。

更重要的是，如果数据应该异步更改，应该以某种方式通知组件。这可以使用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) {}
}