Angular 2のテンプレートでjqueryを使用するにはどうすればよいですか？

Question

Angular 2のコンポーネントのテンプレートでJQueryを使用するにはどうすればよいですか？

は、このエラーを返すコンポーネント使用

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

のテンプレートで

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

例

は例外TypeError

ERROR ：CO $関数{}はない

Answer 1

ドンあなたがそれを必要としないなら、角度の枠組みを通らない。 (click)参照を含む角度成分に基づいて、そのコンポーネントのインスタンスとして$を解決するように角度試みを解決している使用しようとすることにより

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

。

また、コンポーネントでメソッドを作成してjqueryに呼び出す必要があります。このメソッドは、(click)を使用してテンプレートから呼び出されます。

Answer 2

jqueryと通信するカスタムディレクティブを作成します。

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

    constructor(private el: elementRef) { 
    } 

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

AngularのremoveEventListenerを追加し、$を不透明トークンにラップする必要がある場合もあります。