更改检测不适用于角度输入去抖动

Question

我有一个输入并且在 debounce（完成输入后半秒）我正在设置一个变量。我希望这个变量改变一些 html。它有效，但只有在我完成输入后，然后输入并重新开始。所以在第二次绕过它就可以了。我希望它在第一次发生。

这是我的html：

  <loader *ngIf="searchLoader"></loader>
  <input
    #searchInput
    placeholder="Search pages"
    [(ngModel)]="searchQuery"
    (keyup)="debounceSearch.next($event.target.value)"
  >

还有我的 ts：

  debounceSearch: Subject<any> = new Subject<any>();

  ngOnInit() {
    this.debounceSearch
      .pipe(debounceTime(500))
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        this.searchLoader = true;
        this.searchDocs();
      });
  }

所以在上面，<loader></loader> 只在第二次去抖动后出现。这很奇怪，因为我立即将变量设置为 true。

• debounceTime 来自 rxjs 运算符 import { debounceTime, takeUntil } from "rxjs/operators";，基本上在设定的时间量（500 毫秒）之后，它将触发 .subscribe 函数中的任何内容。

我尝试使用更改检测器 ref 并检测订阅功能中的更改，但它对我不起作用。

Answer 1

这里的问题是你试图在没有触发Subscription 的情况下分配一个值。

以StackBlitz 为例 如果您打开控制台日志，您最终会按以下顺序看到它

• ngOnChanges 调用
• ngOnInit 已调用。
• 开启未定义

注意订阅中的 console.log 没有被调用。

由于没有触发订阅，因此永远不会调用内部回调。针对您当前情况的一种解决方案是在 ngOnInit 之外分配默认的 this.searchLoader = true or false;

@Component({
  selector: 'hello',
  template: `
    <h1>Hello {{name}}!</h1>
    <p *ngIf="turnOn">I'm a ninja</p>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit  {
  @Input() name: string;

  turnOn: boolean;
  switchSubject: Subject<any> = new Subject<any>();

  ngOnChanges() {
    console.log('ngOnChanges called.');
  }

  ngOnInit() {
    console.log('ngOnInit called.');
    this.switchSubject.subscribe(() => {
      console.log('subscription activated.');
      this.turnOn = true;
    })
    console.log(`turnOn is ${this.turnOn}`)
  }
}