在 Angular 的 ContentChildren 中渲染组件答案

【问题标题】：Rendering the components in ContentChildren of Angular在 Angular 的 ContentChildren 中渲染组件
【发布时间】：2018-08-23 13:54:49
【问题描述】：

这是我的组件：

import { Component, OnInit, ContentChildren, QueryList } from '@angular/core';
import { IconBoxComponent } from '../icon-box/icon-box.component';

@Component({
  selector: 'app-three-icon-box',
  templateUrl: './three-icon-box.component.html',
  styleUrls: ['./three-icon-box.component.scss']
})
export class ThreeIconBoxComponent implements OnInit {
  @ContentChildren(IconBoxComponent) boxes: QueryList<IconBoxComponent>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterContentInit() {
    console.log(this.boxes);
  }

}

它的模板如下所示：

<div class="row justify-content-center">
  <div class="col-12 col-md-10">
    <div class="row justify-content-center text-center">
      <div *ngFor="let box of boxes" class="col-12 col-sm-4 col-lg-3 offset-lg-1 lz-mb-2 lz-mb-sm-0">
        {{ box }}
      </div>
    </div>
  </div>
</div>

这就是我的渲染方式：

  <app-three-icon-box>
    <app-icon-box icon="#icon-one">content 1</app-icon-box>
    <app-icon-box icon="#icon-two">content 2</app-icon-box>
    <app-icon-box icon="#icon-three">content 3</app-icon-box>
  </app-three-icon-box>

在第二个代码块中，我试图渲染<app-icon-box>，但我不知道如何。 {{ box }} 只是我想要做的一个想法，但我只是得到[object Object]。

【问题讨论】：

您找到解决方案了吗？

标签： angular typescript components

【解决方案1】：

有点不清楚你需要什么。但我想使用 ng-content 就足够了。删除 ContentChildren 和 ngFor 并使用

<ng-content></ng-content>

在您的模板中。

然后你必须直接在声明你的盒子组件的地方添加类。

<app-icon-box class="col-12 col-sm-4 col-lg-3 offset-lg-1 lz-mb-2 lz-mb-sm-0" icon="#here-to-help-you">

要丰富 ThreeIconBoxComponent 中的投影组件，您将需要使用模板和模板出口的完全不同的方法。

【讨论】：

<ng-content> 包含三个元素，我想将每个元素包装在一些 HTML 中。我不只是想直接吐出HTML。
这是不可能的。您可以使用 :host::ng-deep 通过组件 scss 设置框的样式。
我想保留原来的app-icon-box 组件，因为它们在其他地方以不同的方式使用。令我震惊的是 Angular 没有提供一种仅渲染其子组件的方法。
我打算用 ThreeIconBoxComponent 的 scss 来设置它们的样式。这可以通过使用 :host::ng-deep { app-icon-box { // 一些样式 } } 来完成
@user1807782 正如 David Ibl 所说，您想要的称为“动态内容投影”，目前是不可能的。有一个未解决的问题：github.com/angular/angular/issues/8563

【解决方案2】：

你应该使用这个模式

创建 TemplateMarker 指令以标记您要作为参数传递的 templates（以防止抓取 other templates）。
使用@ContentChildren 注入标记。
使用NgTemplateOutlet 在需要的地方渲染它们。

提示：您可以多次渲染每个模板和send them parameters。

例子：

import { Component, Input, Directive, TemplateRef, ContentChildren, QueryList } from '@angular/core';
@Directive({
  selector: '[templateMarker]'
})
export class TemplateMarker {
  constructor(public template: TemplateRef<any>) {}
}
@Component({
  selector: 'template-owner',
  template: `
    <div *ngFor="let marker of markers">
      <i><ng-template [ngTemplateOutlet]="marker.template"></ng-template></i>
    </div>
  `,
})
export class TemplateOwner {
  @ContentChildren(TemplateMarker) markers: QueryList<TemplateMarker>;
}
@Component({
  selector: 'hello',
  template: `<template-owner>
    <div *templateMarker>first template</div>
    <div *templateMarker>second template</div>
  </template-owner>`,
})
export class HelloComponent  {}

【讨论】：