angular - 有什么办法可以做某事，以便 ContentChildren 可以找到父级内部的组件?

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”组件时，我们只看到“默认”按钮，但看不到按钮“aaa”和“bbb”。

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

有没有办法解决这个问题？

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

上面代码的可行示例

相同案例和真实库组件的示例

标签： angularng-content

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