使用数据转换创建指令

Question

我想创建一个 LoaderDirective，它获取并可观察，加载数据同时显示微调器，加载时将微调器更改为原始数据，同时使用 'as'关键字。

我想这样使用它：<div *load="items$ as items">

这是我目前所拥有的：

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[load]',
})
export class LoadDirective<T> {
  private data: T;

  @Input()
  set load(observable: Observable<T>) {
    observable.subscribe({
      next: value => this.loaded(value),
      error: error => this.showError(error)
    });
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {
    this.viewContainer.clear();
    this.viewContainer.createComponent(this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent));
  }

  private loaded(value: T) {
    this.data = value;
    this.viewContainer.clear();
    this.viewContainer.createEmbeddedView(this.templateRef, {load: this.data});
  }

  private showError(e: string) {
    this.viewContainer.clear();
    const errorComponent = this.viewContainer.createComponent(this.componentFactoryResolver.resolveComponentFactory(ErrorComponent));
    errorComponent.instance.error = e;
  }
}

问题是输入数据是可观察的，所以它期望输出是可观察的。有没有类似的方法来改变这个比例如 TransformPipe 在管道？我该如何解决这个问题？

Answer 1

这是我尝试过的方法，如果有效请告诉我。

示例https://stackblitz.com/edit/angular-csogfu

只需对您的代码稍作修改

更改自

this.viewContainer.createEmbeddedView(this.templateRef, {load: this.data});

到

const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
viewRef.context.data = this.data;

模板更改为

<div *appLoader="data$; data as result">
    {{result | json}}
</div>

使用数据转换创建指令

Create directive with data transform

rxjs

typescript

angular-directive

angular