在Angular指令

Question

我在Angular 4中遇到了问题。我有一个具有以下结构的子页面：

<div tableOfContents>
    <page></page>

    <static-page>
        <page></page>
    </static-page>

    <dynamic-page>
        <page></page
    </dynamic-page>
</div>

我想收集tableOfContents指令中的所有Page组件。我尝试了@ContentChildren (Page, {descendants: true})，但它只返回<div tableOfContents>的直接孩子，有什么方法吗？将在页面上动态添加/删除静态页面和动态页面。 @ViewChildren(Page)返回undefined

Answer 1

据我所知，您只有一个选项，因为您无法查询进入子组件的组件。

您可以做的是将page个实例存储在服务中，然后从tableOfContents指令中获取它们。

这样的事情应该足够了：

import {Injectable} from '@angular/core';

import {PageComponent} from '<path-to-page>';

@Injectable()

export class PageInstancesService {

  public instances = [];

  constructor() {}
}

然后在你的page组件中执行：

constructor(
  private pis: PageInstancesService
) {}

ngOnInit() {
  this.pis.instances.push({id: <some-unique-id>, instance: this});
}

推送新实例。要在实例被销毁后将其删除，您需要添加ngOnDestroy：

ngOnDestroy() {

  const i = // Function to get instance index in array goes here

  this.pis.instances.splice(i, 1);
}