javascript - 如何在 Angular 2 中使用 ELementRef 或 @ViewChild 访问特定的 DOM 元素？

Question

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

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

将代码放入组件后，出现以下错误:错误错误:noUiSlider(10.0.0):创建需要单个元素，得到: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'));

我无法使用“nativeElement.querySelector('.nouiSliderinput')”，这将返回 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);
}