angular - 显示标题字符串/templateRef Angular

Question

我试图改进我的代码而不是有条件，所以我决定创建一个指令或者如果可能的话创建一​​个管道，它可以帮助我根据其类型(字符串或模板引用)打印选项卡的标题，我的代码如下，此代码用于我的 Tabs/Tab 组件，但也用于我的 Stepper/step 组件，所以我相信创建可重用的东西会很棒。我试过用 ElementRef、Renderer2、ViewContainerRef、TemplateRef 来做这件事……但我没有成功。

<ng-container *ngIf="tab.isLabelTemplate">
     <ng-container *ngTemplateOutlet="tab.title">
     </ng-container>
</ng-container>
<ng-container *ngIf="!tab.isLabelTemplate">{{ tab.title }}</ng-container>

isLabelTemplate 看起来像这样:

get isLabelTemplate(): boolean {
  return this.title instanceof TemplateRef;
}

非常感谢 :)

Answer 1

您可以利用 Angular 低级 API 来动态操作 DOM 的结构:

ViewContainerRef::createEmbeddedView在指令的宿主元素附近呈现 TemplateRef

Renderer2::insertBefore在指令的宿主元素附近呈现 TextNode

这是该指令的外观示例:

标题模板.directive.ts

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

@Directive({
  selector: '[titleTemplate]',
})
export class TitleTemplateDirective {
  @Input()
  set titleTemplate(value: string | TemplateRef<any>) {
    this.updateView(value);
  }

  textNode: Text;

  constructor(private vcRef: ViewContainerRef, private renderer: Renderer2) {}

  private updateView(value: string | TemplateRef<any>) {
    this.clear();

    if (!value) {
      return;
    }

    if (value instanceof TemplateRef) {
      this.vcRef.createEmbeddedView(value);
    } else {
      this.textNode = this.renderer.createText(value);
      const elem = this.vcRef.element.nativeElement;

      this.renderer.insertBefore(elem.parentNode, this.textNode, elem);
    }
  }

  private clear() {
    this.vcRef.clear();
    if (this.textNode) {
      this.renderer.removeChild(this.textNode.parentNode, this.textNode);
    }
  }

  ngOnDestroy() {
    this.clear();
  }
}

用法:

<ng-container [titleTemplate]="title"></ng-container>  

Forked Stackblitz