在 Angular 指令中查找嵌套组件

【问题标题】：Find nested components in Angular directive在 Angular 指令中查找嵌套组件
【发布时间】：2018-08-08 20:30:43
【问题描述】：

我在 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) 返回未定义

【问题讨论】：

plunker 以便更好地了解问题plnkr.co/edit/OxFk64xFhX09ArB0O8hd?p=preview
这感觉是XY Problem。您不是在询问您要解决的问题；相反，您问的是一个不起作用的解决方案，它被用来解决一些未知问题。 “收集”所有Page 组件到底有什么意义？

标签： angular angular2-directives angular-directive angular-components

【解决方案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);
}

【讨论】：