时间戳

首页 > 解决方案 > 如何从 Angular 2 的管道中附加动态 DOM 元素？

javascript - 如何从 Angular 2 的管道中附加动态 DOM 元素？

问题描述

我正在尝试从管道指令中附加一个垫子微调器，该指令应该在 | 时添加加载 异步正在执行

我有这个人要改造

transform(val: any): any {
this.showLoader();
return isObservable(val)
  ? val.pipe(
      catchError((error) => of(this.hideLoader())),
      finalize(() => this.hideLoader())
    )
  : val;

}

这对于显示加载程序：

  showLoader(): void {
   const componentFactory = 
   this.componentFactoryResolver.resolveComponentFactory<MatSpinner(MatSpinner);
   const matSpinner = this.viewContainerRef.createComponent(componentFactory);

   matSpinner.instance.diameter = 24;

   this.progressElement = matSpinner.injector.get(MatSpinner)._elementRef.nativeElement;
   this.renderer.appendChild(this.el.nativeElement, this.progressElement);

}

不幸的是，当我尝试附加孩子时，我收到了这个错误 在此处输入图像描述

有什么建议可以克服这个问题吗？或者任何其他想法都会有所帮助。

ps：最终的产品应该是这样的<div *ngIf="data$ | loadingPipe | async> </div>

标签： javascriptangularangular-material

解决方案

推荐阅读