请问angular 在组件内怎么获取使用DOM元素？

Question

请问angular 在组件内怎么获取使用DOM元素？

angular小白，使用angular开发product组件， 想对在该组件的input使用RXJS的debounceTime 延迟来实现用户输入结束延迟400ms更新。

fromEvent(inputNode, 'valueChanges').pipe(
      debounceTime(400)
    )
    .subscribe((val) => {
      console.log(val);
      // this.keyword = val;
    });

.html

.ts

结果

请问我该如何获取该对应的DOM元素 并使用它。难道要用事件的方法 event.target ？？

Answer 1

首先使用ElementRef的方法是可行的，但是代码有一些问题。

1. 在constructor()中是获取不到DOM元素的，所以打出来的结果都是null。
2. fromEvent方法的事件参数不对。这个应该是DOM本身的事件，你可以尝试使用input事件。

下面是我运行成功的一个例子：

  // Angular6 + rxjs6
  ngOnInit(): void {
    console.log('oninit: ', this.elRef.nativeElement.querySelector('#searcha'));

    const searchInput = this.elRef.nativeElement.querySelector('#searcha');
    this.inputSubscription = fromEvent(searchInput, 'input')
      .pipe(debounceTime(1000))
      .pipe(map((val: any) => val.target.value))
      .subscribe(val => {
        console.log(val);
      });
  }
  
  ngOnDestroy(): void {
    this.inputSubscription.unsubscribe();
  }

更多的讨论，可以参考这里：https://stackoverflow.com/que...

其实这种方法已经不被Angular推荐了，参考文档：https://angular.io/api/core/E...

Answer 2

可以尝试用@ViewChild()

<textarea #commentTextarea id="comment" [(ngModel)]="comment" name="comment" placeholder="说点什么..." (keyup)="autoSize()"></textarea>

epxort class YourComponent {
 @ViewChild('commentTextarea') commetTextarea: ElementRef
 ...

 autoSize() {
    this.commetTextarea.nativeElement.style.height = this.commetTextarea.nativeElement.scrollHeight + 'px'
  }
}

Answer 3

好像不行，提示this.commetTextarea undefined

Answer 4

不知道你解决了没有, 推荐一个项目里曾经用过的方式, 不需要直接操作dom元素, 使用Subject来传递输入值, 然后通过rxjs的操作符完成具体的操作.

    <input type="text" #searchInput (keyup)="search.next(searchInput.value)">
    
    search: Subject<string> = new Subject<string>();
    
    ngOnInit() {
        this.search.asObservable().debounceTime(400).filter().map().subscribe();
    }