Question

我有3个组成部分：

（1） AppComponent ：这只是一个常规的 AppComponent ，没什么特别的。在 app.component.html 中，我使用 MyComponent ：

<my-component></my-component>

（2） MyComponent ：这只是一个包含 TheirComponent 的包装器组件（ my.component.html ）：

<their-component></their-component>

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

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

我的目标是将所有这些额外的内部指令和组件（此示例中为their-header和their-footer）放在 app.component.html 中，然后传递给它通过 MyComponent 到他们的组件。所以我的 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：传递内部指令/组件的包装器组件

1 个答案: