如何在angular 2中使用ELementRef或@ViewChild訪問特定的DOM元素？

我試圖在角度2中包含nouislider組件。我已經複製了大部分代碼 - 「https://github.com/tb/ng2-nouislider/blob/master/src/nouislider.ts」如何在angular 2中使用ELementRef或@ViewChild訪問特定的DOM元素？

我能夠使其作爲獨立組件工作，但我的企業登錄要求它具有其他組件。

配股代碼的組件後，我收到以下錯誤：錯誤錯誤：noUiSlider（10.0.0）：建立需要一個單一的元素，得到了：空

這是我的HTML片段：

<div #nouiSliderinput [attr.disabled]="disabled ? true : undefined"></div>

這就是我所面對的錯誤我的組件片斷：

inputsConfig.format = this.format || this.config.format || new 
DefaultFormatter(); 
this.slider = noUiSlider.create(
    this.el.nativeElement.querySelector('.nouiSliderinput'), 
    Object.assign(this.config, inputsConfig) 
); 

this.handles = 
[].slice.call(this.el.nativeElement.querySelectorAll('.noUi-handle'));

我無法使用「nativeElement.querySelector（ 'nouiSliderinput'）」，THI s返回null。

有沒有辦法使用Id或類訪問DOM元素。

來源

2017-07-18 Faisal Ali

您從github repo複製了代碼？你爲什麼不使用npm？使用您的方法，您無法收到該軟件包的任何更新/錯誤修正。此外，如果你以這種方式獲得越來越多的軟件包，這將是一場噩夢讓他們更新。 – Akkusativobjekt

感謝您的建議。我承認我很難更新這種方式，但我的項目要求它是AOT編譯的。因此，我沒有使用任何插件或jQuery來支持AOT編譯。 –

看起來像aot不應該是一個問題：https://github.com/tb/ng2-nouislider/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aclosed%20aot – Akkusativobjekt

你想要的是訪問nouiSliderinput。您可以使用nativeElement訪問它。它返回與querySelector相同的對象

@ViewChild('nouiSliderinput') public nouiSliderinput: ElementRef; 

ngOnInit() { 
    // you will get the element by below line 
    console.log(this.nouiSliderinput.nativeElement); 
}

來源

2017-07-18 11:32:12 Dhyey

這是拋出以下錯誤： ** TypeError：無法讀取屬性'nativeElement'undefined ** 同樣的錯誤，當我把它放在ngAfterViewInit（）角度鉤子。 –

你能否確認'

'不在任何'* ngIf'條件下，你可以在屏幕上看到div內的內容？ – Dhyey

我的壞！是的，HTML片段處於'* ngIf'狀態。感謝您的觀察。 –

如何在angular 2中使用ELementRef或@ViewChild訪問特定的DOM元素？

回答

相關問題