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

Question

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

例

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

在組件使用

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

的模板

它返回該錯誤

錯誤類型錯誤：共$不是一個函數{}

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的opaque標記中。