請問angular 在組件內怎么獲取使用DOM元素？

angular小白，使用angular開發(fā)product組件，想對在該組件的input使用RXJS的debounceTime 延遲來實現(xiàn)用戶輸入結束延遲400ms更新。

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

.html

.ts

結果

請問我該如何獲取該對應的DOM元素并使用它。難道要用事件的方法 event.target ？？

回答

編輯回答

小眼睛

不知道你解決了沒有, 推薦一個項目里曾經用過的方式, 不需要直接操作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();
    }

2017年2月22日 09:58

編輯回答

溫衫

可以嘗試用@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'
  }
}

2017年5月21日 09:22

編輯回答

枕頭人

好像不行，提示this.commetTextarea undefined

2017年9月15日 07:03

編輯回答

司令

首先使用ElementRef的方法是可行的，但是代碼有一些問題。

在constructor()中是獲取不到DOM元素的，所以打出來的結果都是null。
fromEvent方法的事件參數(shù)不對。這個應該是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...

2018年3月30日 06:30