Angular 9 - 渲染有限数量的组件 children

Question

我有一个 ButtonGroup 组件，它将呈现一定数量的 ButtonAction 组件。
我尝试为每个 ButtonAction 分配一个模板属性 (TemplateRef)，以便我可以循环并将它们传递给 ng-template（通过 *ngTemplateOutlet）。
我直接将 TemplateRef 注入到 ButtonAction 的构造函数中，但出现错误 “No provider for TemplateRef”。
由于我的目标是仅呈现组件 children 的 有限数量 ，我发现的另一种解决方案是通过指令访问模板。但我不想强迫我们的用户在每个 child 上使用该指令。
那么，我该怎么办？

@Component({
  selector: 'button-group',
  template: `
    <div>
       <ng-content *ngIf="canDisplayAllChildren; else limitedChildren"></ng-content>

       <ng-template #limitedChildren>
         <ng-container *ngFor="let button of buttons">
           <ng-template [ngTemplateOutlet]="button.template"></ng-template>
         </ng-container>
       </ng-template>

       <button-action (click)="toggle()" *ngIf="shouldLimitChildren">
         <icon [name]="'action-more-fill-vert'"></icon>
       </button-action>
    </div>
  `,
})
export class ButtonGroupComponent {
    @Input()
    public maxVisible: number;

    @ContentChildren(ButtonActionComponent) 
    public buttons: QueryList<ButtonActionComponent>;

    public isClosed: boolean = true;

    public toggle() {
        this.isClosed = !this.isClosed;
    }

    public get shouldLimitChildren() {
        return this.hasLimit && this.buttons.length > this.maxVisible;
    }

    public get canDisplayAllChildren() {
        return !this.shouldLimitChildren || this.isOpen;
    }   
}

ButtonActionComponent 所在位置：

@Component({
  selector: "button-action",
  template: `
    ...
  `
})
export class ButtonActionComponent {
    ...
  constructor(public element: ElementRef, public template: TemplateRef<any>) {}
}

Answer 1

我花了一些时间想出一个假设的解决方案，但我想我可能有一些有用的东西不依赖于添加到您的组件的显式指令 children。

由于无法在不涉及结构指令的情况下使用 TemplateRef，我想到了一种类似于 React.cloneElement API.

的机制

所以，让我们定义一个基本的 ButtonComponent，它将用作 ButtonGroupComponent 的 children。

// button.component.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-button",
  template: `
    <button>{{ text }}</button>
  `
})
export class ButtonComponent {
  @Input()
  public text: string;
}

GroupComponent 应该克隆并仅将通过 maxVisible 输入属性指定的数字 children 附加到其视图，我还给出了 [=24] =] 根本没有提供的情况下的默认值，允许显示所有 children：

// group.component.ts

...

@Input()
public maxVisible: number = Number.POSITIVE_INFINITY;

...

我们请Angular提供我们内容中给出的children（我认为这是对差异的最佳解释：）：

// group.component.ts

...

@ContentChildren(ButtonComponent)
private children: QueryList<ButtonComponent>;

...

我们现在需要让 Angular 注入一些东西：

我们当前的容器手动实例化children到;
一个工厂解析器，可以帮助我们即时创建组件；

// group.component.ts

...

constructor(
  private container: ViewContainerRef,
  private factoryResolver: ComponentFactoryResolver
) {}

private factory = this.factoryResolver.resolveComponentFactory(ButtonComponent);

...

现在我们已经从 Angular 获得了我们需要的任何东西，我们可以拦截实现 AfterContentInit 接口并添加 ngAfterContentInit 生命周期的内容初始化。

我们需要循环我们的 children，即时创建新组件并将新组件的所有 public 属性设置为给定 children 的属性：

// group.component.ts

...

ngAfterContentInit() {
  Promise.resolve().then(this.initChildren);
}

private initChildren = () => {
  // here we are converting the QueryList to an array
  this.children.toArray()

    // here we are taking only the elements we need to show
    .slice(0, this.maxVisible)

    // and for each child
    .forEach(child => {

      // we create the new component in the container injected
      // in the constructor the using the factory we created from
      // the resolver, also given by Angular in our constructor
      const component = this.container.createComponent(this.factory);

      // we clone all the properties from the user-given child
      // to the brand new component instance
      this.clonePropertiesFrom(child, component.instance);
    });
};

// nothing too fancy here, just cycling all the properties from
// one object and setting with the same values on another object
private clonePropertiesFrom(from: ButtonComponent, to: ButtonComponent) {
  Object.getOwnPropertyNames(from).forEach(property => {
    to[property] = from[property];
  });
}

...

完整的 GroupComponent 应该是这样的：

// group.component.ts

import {
  Component,
  ContentChildren,
  QueryList,
  AfterContentInit,
  ViewContainerRef,
  ComponentFactoryResolver,
  Input
} from "@angular/core";
import { ButtonComponent } from "./button.component";

@Component({
  selector: "app-group",
  template: ``
})
export class GroupComponent implements AfterContentInit {
  @Input()
  public maxVisible: number = Number.POSITIVE_INFINITY;

  @ContentChildren(ButtonComponent)
  public children: QueryList<ButtonComponent>;

  constructor(
    private container: ViewContainerRef,
    private factoryResolver: ComponentFactoryResolver
  ) {}

  private factory = this.factoryResolver.resolveComponentFactory(
    ButtonComponent
  );

  ngAfterContentInit() {
    Promise.resolve().then(this.initChildren);
  }

  private initChildren = () => {
    this.children
      .toArray()
      .slice(0, this.maxVisible)
      .forEach(child => {
        const component = this.container.createComponent(this.factory);
        this.clonePropertiesFrom(child, component.instance);
      });
  };

  private clonePropertiesFrom(from: ButtonComponent, to: ButtonComponent) {
    Object.getOwnPropertyNames(from).forEach(property => {
      to[property] = from[property];
    });
  }
}

注意我们是在运行时创建ButtonComponent，所以我们需要将它添加到AppModule的entryComponents数组中（这里是引用：https://angular.io/guide/entry-components).

// app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { ButtonComponent } from "./button.component";
import { GroupComponent } from "./group.component";

@NgModule({
  declarations: [AppComponent, ButtonComponent, GroupComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ButtonComponent]
})
export class AppModule {}

使用这两个简单的组件，您应该能够只渲染给定的一个子集 children 保持非常清晰的用法：

<!-- app.component.html -->

<app-group [maxVisible]="3">
  <app-button [text]="'Button 1'"></app-button>
  <app-button [text]="'Button 2'"></app-button>
  <app-button [text]="'Button 3'"></app-button>
  <app-button [text]="'Button 4'"></app-button>
  <app-button [text]="'Button 5'"></app-button>
</app-group>

在这种情况下，只应渲染第一个、第二个和第三个 children。

我测试的codesandbox都是这个： https://codesandbox.io/s/nervous-darkness-6zorf?file=/src/app/app.component.html

希望这对您有所帮助。

Angular 9 - 渲染有限数量的组件 children

Angular 9 - Rendering a limited number of component's children

angular-directive

angular-components

angular