npmからインストールされたブートストラップテザーのjqueryで角度4でツールチップを使用する方法は？

Question

ブートストラップ4のツールチップ機能を使用する方法はありますか？

我々はすでに、NPMインストールを使用して、ブートストラップ4、テザー、とjQueryを設置

やドキュメントに我々は、JavaScriptで

$(function() [ 
    $('[data-toggle="tooltip"]').tooltip() 
}) 

をjqueryのコードを書くとhtmlでこのコードを追加する必要がありました、

data-toggle="tooltip" data-placement="top" title="Tooltip on top" 

私たちは、htmlコードを追加しようとしましたが、動作していないが、明らかに我々はjqueryのコードを記述する必要がありますが、私たちは、角度4でjQueryの構文を書くことができます使用していますタイスクリプト？ 次に、角度4の構文をどこに入れるのですか？

Answer 1

は、その後、あなたの所望の成分に行くangular-cli.json

"scripts": [ 
    "../node_modules/jquery/dist/jquery.min.js", 
    "../node_modules/tether/dist/js/tether.min.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
], 

にjqueryの、テザーとブートストラップスクリプトを追加します。 「declare var $: any;」と入力します。

import { Component, OnInit } from '@angular/core'; 

// this line will allow you to use jQuery 
declare var $: any; 

@Component({ 
    ... 
}) 

ngOnInit() { /* Content here. */ }の内容を入れてください。

ngOnInit() { 
    $(() => { 
    // Testing jQuery 
    console.log('hello there!'); 
    }); 
} 

が、私は角度でのjQueryを使用しない、そのことをお勧めは、ツールチップを検索してみてください、角の上に構築またはRenderer2 https://angular.io/api/core/Renderer2を使用するか、このための独自のディレクティブを構築し、角度Material2は、ツールチップコンポーネントを持っていますあなたは、使用したいかもしれません、非常に簡単にtypescriptで実装する。完全なドキュメントについては

https://material.angular.io/components/tooltip/overview

。

https://github.com/angular/material2

Answer 2

私はディレクティブを作成することによって、それをやりました。

import { Directive, OnInit, Inject, ElementRef } from '@angular/core'; 
import { JQUERY_TOKEN } from './jquery.service'; 

@Directive({ 
    selector: '[data-toggle="tooltip"]' 
}) 
export class TooltipDirective implements OnInit { 
    private el: HTMLElement; 

    constructor(elRef: ElementRef, @Inject(JQUERY_TOKEN) private $: JQueryStatic) { 
     this.el = elRef.nativeElement; 
    } 

    ngOnInit() { 
     this.$(this.el).tooltip(); 
    } 
} 

これは次に

import { NgModule } from '@angular/core'; 

import { TooltipDirective } from './tooltip.directive'; 
import { JQUERY_TOKEN } from './jquery.service'; 

export let jQuery: JQueryStatic = window['jQuery']; 

@NgModule({ 
    imports: [ 
     // ... 
    ], 
    declarations: [ 
     TooltipDirective 
    ], 
    providers: [ 
     { provide: JQUERY_TOKEN, useValue: jQuery } 
    ] 
}) 
export class MyModule {} 

はその後、単にあなたがそれを必要とするコンポーネントに追加するモジュールに追加 import声明

import { InjectionToken } from '@angular/core'; 

export const JQUERY_TOKEN = new InjectionToken<JQueryStatic>('jQuery'); 

で述べた私のjquery.serviceファイルです。

import { TooltipDirective } from './tooltip.directive';