Question

我试图将nouislider包含在angular2的组件中。我从这里复制了大部分代码 - ＆＃34; https://github.com/tb/ng2-nouislider/blob/master/src/nouislider.ts＆＃34;

我能够将它作为一个独立的组件工作，但我的业务登录要求它在另一个组件中。

将代码放入组件后，我收到以下错误：错误错误：noUiSlider（10.0.0）：create需要一个元素，got：null

这是我的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'));

我无法使用＆＃34; nativeElement.querySelector（＆＃39; .nouiSliderinput＆＃39;）＆＃34;，这将返回null。

有没有办法使用Id或类来访问DOM元素。

Answer 1

您想要的是访问nouiSliderinput。您可以使用nativeElement访问它。它返回与querySelector

相同的对象

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

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

如何使用角度2中的ELementRef或@ViewChild访问特定的DOM元素？

1 个答案: