Question

如何在Angular 2组件的模板中使用JQuery？

示例

import { Component } from '@angular/core'  
import * as $ from 'jquery';
...

在组件的模板中使用

<p (click)="$('#myModal').modal('show');">show</p>

它会返回此错误

ERROR TypeError：co。$不是函数{}

Answer 1

如果你不需要它，不要通过角度框架。

<p onclick="$('#myModal').modal('show');">show</p>

尝试使用(click)时，将根据包含的角度组件解析引用，以便角度尝试将$解析为该组件上的实例。

或者，您必须在组件中创建一个方法，然后调用jquery。然后使用(click)从模板调用此方法。

Answer 2

构建一个与jquery通信的自定义指令。

@Directive({selector:'[trigger]'})
export class TriggerModelDirective {

  constructor(private el: elementRef) {
  }

  onInit() {
    this.el.nativeElement.addEventListener(()=> {
       $('#myModal').modal('show');
  });
}

您可能需要添加removeEventListener并将$包装为Angular的不透明标记。

如何在Angular 2的模板中使用jquery？

2 个答案: