如何在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元素？

回答

相关问题