在 Angular 指令中查找嵌套组件

Posted 2023-02-22

【中文标题】在 Angular 指令中查找嵌套组件

【英文标题】：Find nested components in Angular directive

【发布时间】：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 组件到底有什么意义？

【参考方案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);