如果不使用默認值，Angular @HostListener 延遲單擊直到給出輸入

Question

我正在努力完成這件事。 我想要實現的是以下內容。

我有一個指令，其中包含該指令檢查的屬性輸入，但如果沒有給出輸入，它將使用指令本身定義的一些默認值。 但是點擊處理本身總是在 Input 值到達之前發生。 所以它總是檢查錯誤的輸入（默認輸入）。 我也嘗試過使用一些 rxjs，但有些問題。 該指令看起來像這樣。

如果我記錄exceptions @ Oninit訂閱，它甚至不記錄任何內容。 我如何調整我的指令以使其正常工作？

一些代碼以便更好地理解

  private onChangeSub$ = new Subject<AutoSaveExceptions>();
  private readonly clicks$ = new Subject<HTMLElement>();
  private someStream$: Subscription;

  private subscription$: Subscription;

  ngOnChanges(changes: SimpleChanges) {
    if (changes && changes['exceptions'] && changes['exceptions'].firstChange === true) {
      this.onChangeSub$.next(changes['exceptions'].currentValue);
      console.log(changes['exceptions'].currentValue);
    }
  }

ngOnInit() {
    console.log('oninit');
    this.subscription$ = this.onChangeSub$.pipe(
      defaultIfEmpty(this.inlineDefaultExceptions)
      ).subscribe((exceptions) => {
      this.exceptionAttributes = exceptions;
    });
    this.someStream$ = this.clicks$.pipe(
      delay(300),
    ).subscribe((target) => this.handleClicks(target));
  }

@HostListener('document:click', ['$event.target'])
  onClick(target: HTMLElement) {
    this.clicks$.next(target);
  }

@Edit：沒有指令的基本想法復制

Answer 1

首先，您必須避免使用@HostListener('document:click', ['$event.target']) 。 這可能成為主要性能問題的根源。 原因是您的指令/組件的每個實例都有這個，您注冊的文檔點擊次數與您擁有的指令/組件實例的數量一樣多，所有這些都會嚴重觸發更改檢測。 小心那個。

如果您想收聽全球點擊，您應該做的是這樣的：

const documentClick$: Observable<MouseEvent> = fromEvent(document, 'click').pipe(publish(), refCount());
export const DOCUMENT_CLICK = new InjectionToken('DOCUMENT_CLICK', {providedIn: 'root', factory: () => documentClick$});

然后將其注入您的組件/指令：

constructor(@Inject(DOCUMENT_CLICK) private readonly documentClick$: Observable) {}

然后你可以用它做任何類型的 rxjs 魔法，它會確保你在整個應用程序中最多只有一個文檔點擊監聽器。 更少的變更檢測運行 - 更好的性能。

現在您可以過濾 click$ 流，直到發生更改：

this.documentClick$.pipe(
  withLatestFrom(this.onChangeSub$) // should not emit anything further until this stream emits, if it does, just add a filter
  filter(([event, changes]) => ... ) // check that it's not default
).subscribe(() => ...) // handle there for example

編輯：您的指令可以檢查編輯狀態並將elementRef與我上面提到的documentClick$一起注入，然后在啟用編輯時指令可以偵聽全局單擊並以檢查它是否在我們元素之外的方式處理它，如果是，則觸發事件會導致自動保存。 這是stackblitz 鏈接。

Answer 2

運算符defaultIfEmpty()在其源 Observable 完成時發出。 但是，您的onChangeSub$是一個僅在您調用onChangeSub$.complete()時完成的主題，因此您永遠不會收到默認值。

你可能正在尋找這樣的東西：

timeoutWith(delay, of(this.inlineDefaultExceptions))