有什么办法可以让 ContentChildren 找到父级 <ng-content></ng-content> 中的组件吗？

Question

我有一些来自第三方库的组件，它们工作正常，接下来使用时：

<lib>
  <lib-inner [text]="'111'"></lib-inner>
  <lib-inner [text]="'222'"></lib-inner>
</lib>

'lib'和'lib-inner'组件代码的简化模仿：

@Component({
  selector: "lib",
  template: `
    <ng-container *ngFor="let c of allInner;">
      <button>{{ c.text }}</button>
    </ng-container>
  `
})
export class LibComponent {
  @ContentChildren(LibInnerComponent) allInner: QueryList<LibInnerComponent>;
}

@Component({
  selector: "lib-inner",
  template: ``
})
export class LibInnerComponent {
  @Input() text: string;
}

我想创建包装组件：

<wrapper-for-lib>
  <lib-inner [text]="'aaa'"></lib-inner>
  <lib-inner [text]="'bbb'"></lib-inner>
</wrapper-for-lib>

@Component({
  selector: "wrapper-for-lib",
  template: `
    <lib>
      <ng-content></ng-content>
      <lib-inner [text]="'default'"></lib-inner>
    </lib>
  `
})
export class WrapperForLibComponent {}

当我们使用这个 'wrapper-for-lib' 组件时，我们只看到 'default' 按钮，但看不到 'aaa' 和 'bbb'.

按钮

'lib' 组件的 ContentChildren() 找不到 'lib-inner' ng-content 中的组件，

有什么办法可以解决吗？

注意，我无法更改 'lib' 和 'lib-inner' 的代码，因为它们模仿真实的第三方库组件的大小写，我无法更改。

workable example with above code

example for same case and real library component

Answer 1

我认为问题在于 lib-inner 呈现为空。尝试渲染一些内容，并将 ng-content 添加到 lib 组件：

lib-inner.component.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: "lib-inner",
  template: `<button>{{text }}</button>`
})
export class LibInnerComponent {
  @Input() text: string;
}

lib.component.ts

import { Component} from "@angular/core";

@Component({
  selector: "lib",
  template: `<ng-content></ng-content>`
})
export class LibComponent {

}

包装器-lib.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "wrapper-for-lib",
  template: `
    <lib>
      <ng-content></ng-content>
      <lib-inner [text]="'default'"></lib-inner>
    </lib>
  `
})
export class WrapperForLibComponent {}

编辑：参见：https://stackblitz.com/edit/angular-kendo-toolbar-ng-conent-imitation-fazqq6?file=app%2Fwrapper-for-lib.component.ts

Answer 2

您可以 select 包装器中的所有 lib-inner 组件并将它们循环到模板中。

Component({
    selector: "wrapper-for-lib",
    template: `
    <lib>
        <ng-content></ng-content>
        <ng-container *ngFor="let inner of libInners">
            <lib-inner [text]="inner.text"></lib-inner>
        </ng-container>
    </lib>
`
})
export class WrapperForLibComponent {
    @ContentChildren(LibInnerComponent) libInners: QueryList<LibInnerComponent>;
  }

有什么办法可以让 ContentChildren 找到父级 <ng-content></ng-content> 中的组件吗？

Is there any way to do something, in order to ContentChildren could find components that are inside parent's <ng-content></ng-content>?

angular

ng-content