如何在Angular中将contentchildren的每个子元素包装在自己的元素中

问题描述

让我说我想制作一个可以排列所有子元素的组件.我应该能够提供例如元素:

lets say I want to make a component that arranges all of its children. I should be able to provide the element for example:

<app-layout-list>
  <p>foo</p>
  <p>bar</p>
  <p>etc</p>
</app-layout-list>

在app-layout-list内应该执行类似的操作

and inside the app-layout-list should do something like

<ul>
  <li>
    <ng-content>
  </li>
<ul>

会为每个内容生成一个li.是否可以使用ng-content还是我需要做一些更复杂的事情?

where it generates an li for each content. Is this possible using ng-content or do I need to do something more complicated?

推荐答案

当然可以！ :)

这很简单！ (直接访问Stackplitz演示)

Angular为此类问题提供了完美的API.

Angular provides a perfect API for this kind of problems.

基本上，您想要的是将<ng-content></ng-content>分成不同的部分.

Basically what you want is to splitt your <ng-content></ng-content> in their different parts.

首先，您必须通过指令标记要显示在<li>元素内的部分.达到此目的的最佳方法是通过Structural Directive，因为它会为我们生成一个<ng-template></ng-template>，稍后我们将需要它.

First of all you have to mark the portions you want to display inside the <li> elements via a directive. The best way to achive this is via a Structural Directive, because it generates a <ng-template></ng-template> for us, which we need later.

我们构建的Directive是非常基本的.它仅将TemplateRef注入构造函数中，并将模板保存在公共变量"中:

The Directive we build is very basic. It only injects the TemplateRef in the constructor and saves the template in a `public variable:

list-item.directive.ts

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[appListItem]'
})
export class ListItemDirective {

  public itemTemplate: TemplateRef<any>;

  constructor(private templateRef: TemplateRef<any>) {
    this.itemTemplate = this.templateRef;
  }

}

使用此指令，我们标记了我们希望放置在<li>元素内的html元素.

With this directive we mark our html elements which we like to place inside a <li> element.

app.component.ts

<app-layout-list>
  <p *appListItem>foo</p>
  <p *appListItem>bar</p>
  <p *appListItem>etc</p>
</app-layout-list>

在LayoutListComponent内部，我们通过@ContentChildren(ListItemDirective) listItems

layout-list.component.ts

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

@Component({
  selector: 'app-layout-list',
  templateUrl: './layout-list.component.html',
  styleUrls: ['./layout-list.component.css']
})
export class LayoutListComponent {
  @ContentChildren(ListItemDirective) listItems: QueryList<ListItemDirective>;
}

最后在Component template内部，我们遍历listItems并将每个项目的TemplateReference放置在ngTemplateOutlet

Finally inside the Component template we are iterating through the listItems and placing the TemplateReference of every item inside a ngTemplateOutlet

layout-list.component.html

<ul>
  <ng-container *ngFor="let item of listItems">
    <li>
      <ng-container [ngTemplateOutlet]="item.itemTemplate"></ng-container>
    </li>
  </ng-container>
</ul>

演示:: Stackblitz演示

GITHUB源: Github源

这篇关于如何在Angular中将contentchildren的每个子元素包装在自己的元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！