Question

我在 app.component.html

中具有以下内容

 <label class="label">Trigger Observables: </label>
 <div class="control">
   <input class='input is-primary' type='text' placeholder="enter some text" (input)='obs4chain()' #inp/>
 </div>

在 app.component.ts

中

obs4chain(){
  this.clearSubscription();
  const observable = fromEvent(document, 'input');

  this.subscription = observable.pipe(
    map(<InputEvent>(eventInfo) => eventInfo.target.value),
    debounceTime(500),
    distinctUntilChanged()
  ).subscribe(
    (evt) => console.log(evt)
  );

}

此代码可以正常工作，并且符合预期，但是在有多个输入字段的情况下，我只需要一个特定的字段，因此使用本地ref和viewchild可以实现：

@ViewChild('inp') myInput: ElementRef;

然后像这样调整我可观察的声明：const observable = fromEvent(this.myInput.nativeElement, 'input');

我可以看到，通过viewChild，我传递的是输入的本机html元素，而不是听应根据文档工作的整个文档：

fromEvent接受事件目标作为第一个参数，该目标是具有用于注册事件处理函数的方法的对象。

所以我不确定为什么在这种情况下无法创建可观察对象。有任何想法吗？

编辑按照@ bryan60的示例并重构了自己的代码，我注意到了一些东西。

在可观察范围内立即订阅具有预期的行为：

  const observable = fromEvent(this.myInput.nativeElement, 'input').pipe(
    map(<InputEvent>(eventInfo) => eventInfo.target.value),
    debounceTime(500),
    distinctUntilChanged()
  ).subscribe(
    (evt) => console.log(evt)
  );

但是将其存储为var并在之后订阅则不会：

  let observable = fromEvent(this.myInput.nativeElement, 'input').pipe(
    map(<InputEvent>(eventInfo) => eventInfo.target.value),
    debounceTime(500),
    distinctUntilChanged()
  );
  this.subscription = observable.subscribe(
    (evt) => console.log(evt)
  );

我仍然不确定为什么。

fromEvent（）无法在ViewChild上触发可观察到的？

0 个答案: