angular - 带有嵌入式 else 模板的自定义 ngIf 指令

Question

在 Angular 应用程序中，使用 ngIf 指令显示一些来自 Observable 的数据并提供其他模板以在数据加载时显示占位符是 Angular 应用程序中的常见模式。

<data-view *ngIf="data$ | async as data; else progress" [items]="data">
</data-view>

<ng-template #progress>
  <mat-icon></mat-icon>
  <mat-progress></mat-progress>
</ng-template>

然而，它需要多次重复 else 模板、异步管道和 as 子句。是否可以通过这样的自定义指令来避免此样板文件:

<data-view *ngWait="data$" items="data">
</data-view>

我了解如何将 ngIf 与异步管道结合使用，但我不知道如何将 else 模板嵌入到自定义指令中。

Answer 1

您可以在结构指令中使用 ViewContainerRef 的 createComponent

@Directive({
  selector: "{Your-Selector}"
})
export class StructuralDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private resolver: ComponentFactoryResolver
  ) {}

  @Input() {Your-Selector}: boolean;

  ngOnInit() {
    if (this.{Your-Selector}) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      let factory = this.resolver.resolveComponentFactory({Your component that holds default message});
      this.viewContainer.createComponent(factory);
    }
  }
}

您还必须在入口组件中添加{您的组件保存默认消息}。

这是一个简单的演示，网址为 CodeSandbox可以作为引用。