鍍金池/ 問答/HTML5  HTML/ 請問angular 在組件內(nèi)怎么獲取使用DOM元素？

請問angular 在組件內(nèi)怎么獲取使用DOM元素？

請問angular 在組件內(nèi)怎么獲取使用DOM元素？

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

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

.html
clipboard.png

.ts

clipboard.png

結(jié)果
clipboard.png

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

回答
編輯回答
小眼睛

不知道你解決了沒有, 推薦一個項目里曾經(jīng)用過的方式, 不需要直接操作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的方法是可行的，但是代碼有一些問題。

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

其實這種方法已經(jīng)不被Angular推薦了，參考文檔：https://angular.io/api/core/E...

clipboard.png

2018年3月30日 06:30