導入數據透視表JS在角2

Question

我學習角2，並試圖當我試圖角二是不給任何包裹透視JS導入薩科Kruchten寫的數據透視表中的JS角2應用

錯誤，但是當我嘗試在瀏覽器中檢查相同時它不顯示數據透視表。

我可以檢查組件是否已創建，但始終爲空。我想AfterViewInit應該讓我顯示錶格。

\\ pivot.component.ts

import {Component , Inject, ElementRef, AfterViewInit} from '@angular/core'; 

declare var jQuery:any; 
declare var $:any; 
import 'pivottable/dist/pivot.min.js'; 
import 'pivottable/dist/pivot.min.css'; 
@Component({ 
    selector: 'app-pivot', 
    template: `<div id="pivot"></div>` 
}) 

export class PivotWrapper { 

private el: ElementRef; 
//constructor spelling was incorrect now working fine 
constructor (@Inject(ElementRef)el: ElementRef){ 
    this.el = el; 
} 
ngAfterViewInit(){ 

    if (!this.el || 
     !this.el.nativeElement || 
     !this.el.nativeElement.children){ 
      console.log('cant build without element'); 
      return; 
    } 

    var container = this.el.nativeElement; 
    var inst = jQuery(container); 
    var targetElement = inst.find('#pivot'); 

    if (!targetElement){ 
     console.log('cant find the pivot element'); 
     return; 
    } 

    //this helps if you build more than once as it will wipe the dom for that element 
    while (targetElement.firstChild){ 
     targetElement.removeChild(targetElement.firstChild); 
    } 

    //here is the magic 
    targetElement.pivot([ 
      {color: "blue", shape: "circle"}, 
      {color: "red", shape: "triangle"} 
     ], 
     { 
      rows: ["color"], 
      cols: ["shape"] 
     }); 
} 

}

\\ app.component.ts

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

declare var jQuery: any; 
import {PivotWrapper} from './pivot.component'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {} 

\\ app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { MaterialModule } from '@angular/material'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {NoopAnimationsModule} from '@angular/platform-browser/animations'; 
import { AppComponent } from './app.component'; 
import {PivotWrapper} from './pivot.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, PivotWrapper 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    NoopAnimationsModule, 
    FormsModule, 
    HttpModule, 
    MaterialModule.forRoot() 
    ], 
    providers: [], 
    bootstrap: [AppComponent, PivotWrapper] 
}) 
export class AppModule { } 

Answer 1

請參閱下面的解決方案： 我使用角CLI

--package.json

"jquery": "^3.2.1", 
"jquery-ui-dist": "^1.12.1",  
"pivottable": "^2.13.0", 

--angular-cli.json

"styles": [ 
    "../node_modules/pivottable/dist/pivot.min.js", 
    "styles.css" 
    ], 
    "scripts": ["../node_modules/jquery/dist/jquery.min.js", 
    "../node_modules/jquery-ui-dist/jquery-ui.min.js", 
    "../node_modules/pivottable/dist/pivot.min.js" 

    ], 

--app-樞軸包裝

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

import 'pivottable/dist/pivot.min.js'; 
import 'pivottable/dist/pivot.min.css'; 
declare var jQuery:any; 
declare var $:any; 

@Component({ 
selector: 'app-pivot-wrapper', 
templateUrl: './pivot-wrapper.component.html', 
styleUrls: ['./pivot-wrapper.component.css'] 
}) 

export class PivotWrapperComponent implements OnInit { 
private el: ElementRef; 
constructor(@Inject(ElementRef)el: ElementRef) { 
    this.el = el; 

} 

ngOnInit() {  
} 

ngAfterViewInit(){ 

if (!this.el || 
    !this.el.nativeElement || 
    !this.el.nativeElement.children){ 
     console.log('cant build without element'); 
     return; 
} 

    var container = this.el.nativeElement; 
    var inst = jQuery(container); 
    var targetElement = inst.find('#output'); 

    if (!targetElement){ 
    console.log('cant find the pivot element'); 
    return; 
    } 


while (targetElement.firstChild){ 
    targetElement.removeChild(targetElement.firstChild); 
    } 

    //here is the magic 
    targetElement.pivot([ 
     {color: "blue", shape: "circle"}, 
     {color: "red", shape: "triangle"} 
    ], 
    { 
     rows: ["color"], 
     cols: ["shape"] 
    }); 
    } 
} 

--pivot-wrapper.component.html

<div id="output"></div> 

Answer 2

這是使用數據透視表https://github.com/kurtzace/pivottableandreact反應的例子（在typescipt生態系統解讀爲pivottobale工作） - 可能不回答你的問題 - 但可能會給你提示