Создать директиву с преобразованием данных

Question

Я хотел бы создать LoaderDirective, который получает и наблюдает, загружает данные, показывает покажет счетчик, и при его загрузке изменяет счетчик на исходные данные, одновременно открывая загруженные данные с помощью ключевого слова «как».

Я хотел бы использовать это так: <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>