角度2のアプリケーションにdataTableを含めるにはどうすればよいですか？

Question

私は角度2で単純なアプリケーションを使用しています。データをページテーブルに表示します。私はthis example非常にいいと私のアプリで使用したいと思います。

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> 
 
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css">

：

• 例のhtmlは次のようindex.htmlのスクリプトである、home.component.htmlで

• 例cssあります210

  私はこれを動作させるためにJavaスクリプトコードをどこに置くべきか知りたい。 index.htmlとhome.compose.htmlを入れようとしましたが、正しく動作しませんでした。

  Javaスクリプトのコードがどこにあるのか教えてください。 ありがとうございます。 これはjavascriptのである：

  $(document).ready(function() { 
      $('#example').DataTable({ 
       columnDefs: [ { 
        orderable: false, 
        className: 'select-checkbox', 
        targets: 0 
       } ], 
       select: { 
        style: 'os', 
        selector: 'td:first-child' 
       }, 
       order: [[ 1, 'asc' ]] 
      }); 
  }); 
  

Answer 1

も、まだそれは、1つのコンポーネントで使われている場合は、それらを使用したい場合は、その角度互換性のあるバージョンを使用し、その後、ちょうどあなたのコンポーネントにngOnIntにコードの一部を入れて試してみてくださいこのように、あなたのコンポーネントで何かコードをインポートするインポートを使用します。

import {Component} from "@angular/core"; 
import {$} from "jquery"; 
//also import the datatables plugin for jQuery 


@Component({ 
    selector: "app", 
    templateUrl: "app.html", 
    styleUrls: ["jquery.dataTables.min.css", "select.dataTables.min.css"] 
}); 
export class LoginComponent { 
    constructor() {  
    } 

    ngOnInit() { 
    $('#example').DataTable({ 
    columnDefs: [ { 
     orderable: false, 
     className: 'select-checkbox', 
     targets: 0 
    } ], 
    select: { 
     style: 'os', 
     selector: 'td:first-child' 
    }, 
    order: [[ 1, 'asc' ]] 
    }); 
    } 

} 

Answer 2

import {Component} from "@angular/core"; import {$} from "jquery"; 
    //also import the datatables plugin for jQuery 


    @Component({ selector: "app", templateUrl: "app.html", 
    styleUrls: ["jquery.dataTables.min.css", 
    "select.dataTables.min.css"] }); export class LoginComponent { 
    constructor() {  } 

     ngOnInit() { 
     $('#example').DataTable({ 
     columnDefs: [ { 
      orderable: false, 
      className: 'select-checkbox', 
      targets: 0 
     } ], 
     select: { 
      style: 'os', 
      selector: 'td:first-child' 
     }, 
     order: [[ 1, 'asc' ]] }); } 

    } 

Answer 3

すでにcomponent.tsファイルにインポートする必要はありませんよりも、あなたのHTMLページ内のjQueryのリファレンスを取った場合。それは私のためにうまく動作している下のコードを参照してください。

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; 
import { Observable } from 'rxjs/Rx'; 
import { Global } from '../shared/global'; 
declare var $ : any; 

@Component({ 
    templateUrl: 'app/Component/assignfeatureview.component.html' 
}) 

export class AssignFeatureViewComponent { 
    constructor() { 

    } 
    ngOnInit() { 
     $(document).ready(function() { 
      $('#tblAssignFeature').DataTable(); 
     }); 
    } 
}