Question

我有三个组成部分。

CategoryComponent - 类别列表
ListComponent - 所选类别的元素列表
ScreenComponent - MenuComponent和ContentComponent的组合

ScreenComponent模板如下所示：

<category-list></category-list>
<elements-list [categoryId]="6"></elements-list>

我希望ListComponent获取在CategoryComponent中选择的类别的ID，而不是硬编码的6。我怎样才能做到这一点？这种正确的方法或CategoryComponent作业应该由ScreenComponent完成吗？

Answer 1

由于这两个组件之间没有关系（父/子），因此您需要利用共享服务。元素列表将注册到服务中的observable，以便在选择类别时进行通知，并相应地更新自己。

此服务可以包含要订阅的数据和可观察数据，以便在更新数据时收到通知。

<强>服务

export class SharedService {
  observable: Observable<any>;
  observer: Observer<any>;

  constructor() {
    this.observable = new Observable.create(observer => {
      this.observer = observer;
    }).share();

  updateData() {
    this.observer.next('something');
  }
}

<强>组件

@Component({
  selector: 'my-component1',
  template: `
    (...)
  `
})
export class MyComponent1 {
  constructor(private service:ListService) {
    this.service.observable.subscribe.(data => {
      (...)
    });
  }
}

<强>自举

bootstrap(AppComponent, [ SharedService ]);

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

角度依赖组件

1 个答案: