Angular: 包装器组件传递内部 directives/components

Question

我有 3 个组件：

(1) AppComponent：这只是一个普通的AppComponent，没什么特别的。在 app.component.html 我使用我的 MyComponent:

<my-component></my-component>

(2) MyComponent: 这只是一个包含 TheirComponent 的包装组件，像这样 (my.component.html):

<their-component></their-component>

(3) TheirComponent：这是一个第三方组件（来自 NPM 包）。它可以包含来自第三方组件的指令和其他组件。例如：

<their-component>
    <their-header>Title</their-header>
    <their-footer>Title</their-footer>
</their-component>

我的目标是将所有这些额外的内部指令和组件（本例中的 their-header 和 their-footer）放入 app.component.html，然后通过 MyComponent 传递给 TheirComponent。所以我的 app.component.html 应该是这样的：

<my-component>
    <their-header>Title</their-header>
    <their-footer>Title</their-footer>
</my-component>

我尝试为此使用 ng-content。它适用于简单的 HTML 元素，我知道，但不适用于这些第三方指令。这是我试过的 (my.component.html):

<their-component>
    <ng-content></ng-content>
</their-component>

不行，也没有错误。也许这是一个内容投影问题，我不确定，这是怎么称呼的。有什么解决办法吗？谢谢。

示例：https://plnkr.co/edit/SgM4sbYQrZXDcrKuon2d?p=preview

Answer 1

如果你真的需要它，你可以利用 ngProjectAs 属性。

为了获得 ButtonGroup（k-group-start、k-group-end 类等）提供的所有附加功能，您必须将按钮数组传递给 kendo组件。

它可能是这样的：

import { Component, QueryList, ContentChildren, Input, ViewChild } from '@angular/core';
import { Button, ButtonGroup } from '@progress/kendo-angular-buttons';

@Component({
  selector: 'my-component',
  template: `
    <kendo-buttongroup>
        <ng-content ngProjectAs="[kendoButton]"></ng-content>
    </kendo-buttongroup>
  `
})
export class MyComponent {

  @ViewChild(ButtonGroup) buttonGroup: ButtonGroup;

  @ContentChildren(Button) buttons: QueryList<Button>;

  ngAfterViewInit() {
    this.buttonGroup.buttons = this.buttons;
    this.buttonGroup.ngAfterContentInit();
  }
}

Plunker Example

另请参阅：

Angular: 包装器组件传递内部 directives/components

Angular: wrapper component to pass inner directives/components

typescript

angular-template

angular-directive

angular