Angular-是否可以在子组件中使用内容投影？

Question

注意——我意识到这个例子可以在不使用内容投影的情况下更容易地完成。我将其用作一个非常简化的示例。

假设我有以下组件，其中列出了两个不同元素中的名称：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-name-list',
  templateUrl: `
  <div class='large'>
    <h1>Large Names</h1>
    <ng-content select="large"></ng-content>
  </div>
  <div class='small'>
    <h1>Small Names</h1>
    <ng-content select="small"></ng-content>
  </div>
`,
  styleUrls: ['./name-list.component.css']
})
export class TestNgContentComponent {
  constructor() { }
}

然后我可以从具有两个名称列表的模板中调用此组件，如下所示：

<app-names-list>
  <h1 ngProjectAs="large" *ngFor="let n of names">{{ n }}</h1>
  <h2 ngProjectAs="small" *ngFor="let n of names">{{ n }}</h2>
</app-names-list>

请注意，两个名称列表使用相同的数据。是否可以用包含两者的组件替换传递的 h1 和 h2 标签，并将它们投影到父级？例如。像这样：

@Component({
  selector: 'app-name',
  template: `
    <h1 ngProjectAs="large">{{name}}</h1>
    <h2 ngProjectAs="small">{{name}}</h2>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

然后修改模板如下：

<app-names-list>
  <app-name *ngFor="let n of names" [name]="n"></app-name>
</app-names-list>

一旦我将 ngProjectAs 指令嵌入到 app-name 模板中，这将不再有效。有没有办法在子组件中进行这样的投影？

Answer 1

这是我的方法：

我将header tags 包裹在ng-template 中，以便它可以附加到ng-container 作为嵌入视图。
你可以阅读更多关于embedded 和host 查看here 的信息。

@Component({
  selector: 'app-name',
  template: `
    <ng-template #large>
      <h1>{{name}}</h1>
    </ng-template>

    <ng-template #small>
      <h2>{{name}}</h2>
    </ng-template>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
  @ViewChild('large', { static: true, read: TemplateRef }) large: TemplateRef<any>;
  @ViewChild('small', { static: true, read: TemplateRef }) small: TemplateRef<any>;
}

在这里，我将ng-content 替换为ng-container，以便我可以附加嵌入的视图。

@Component({
  selector: 'app-name-list',
  template: `
    <div class='large'>
      <h1>Large Names</h1>
      <ng-container #large></ng-container>
    </div>

    <ng-container #foo></ng-container>

    <div class='small'>
      <h1>Small Names</h1>
      <ng-container #small></ng-container>
    </div>
  `,
})
export class TestNgContentComponent {
  @ContentChildren(HelloComponent, { read: HelloComponent }) children: QueryList<HelloComponent>;
  @ViewChild('large', { static: true, read: ViewContainerRef }) largeNamesContainer: ViewContainerRef;
  @ViewChild('small', { static: true, read: ViewContainerRef }) smallNamesContainer: ViewContainerRef;

  constructor() { }

  ngAfterContentInit () {
    this.populateView();
  }

  private populateView () {
    this.largeNamesContainer.clear();
    this.smallNamesContainer.clear();

    this.children.forEach(child => {
      this.largeNamesContainer.createEmbeddedView(child.large);
      this.smallNamesContainer.createEmbeddedView(child.small);
    });
  }
}

Here is a StackBlitz demo.