Question

我需要在角度组件中调用Jquery方法，这就是场景：

我想使用Materialise CSS框架toast功能：

例如：

Materialize.toast('toast content', 3000);

我试着这样做：

ngAfterViewInit() {
  $(this.elementRef.nativeElement.Materialize.toast('toast content', 3000));
}

我的控制台输出是：

TypeError: Cannot read property 'toast' of undefined

Answer 1

如果你必须

class MyComponent implements AfterViewInit {
  constructor(private _elementRef: ElementRef) {
  }
  ngAfterViewInit() {
    $(this._elementRef.nativeElement)...
  }
}

您可能还需要禁用视图封装

@Component({
  selector: 'zippy',
  templateUrl: 'zippy.html',
  styles: [`
    .zippy {
      background: green;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

有关详细信息，请参阅http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

你应该知道在Angular2中不鼓励直接访问DOM，因为它阻止了在web worker和服务器渲染中运行。使用jQuery也会出现问题。

在Component Angular 2中调用Jquery方法

1 个答案: