2

現在動作する angular2-seed プロジェクトをセットアップしようとしましたが、環境に PrimeNG を追加したいのですが、行き詰まりました。

もちろん、私の最初のステップ：primengとprimuiのインストールでした

npm install primeng --save
npm install primeui --save

次に、マッピング @ https://github.com/mgechev/angular2-seed/blob/master/tools/config/seed.config.ts#L129を追加しました

私のコンポーネントは次のようになります。

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {PieChart} from 'primeng/primeng';

@Component({
    selector: 'sd-stats',
    moduleId: module.id,
    templateUrl: './stats.component.html',
    styleUrls: ['./stats.component.css'],
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, PieChart]
})

export class StatsComponent {

    data: any[];

    constructor() {
        this.data = [{
            value: 300,
            color: '#F7464A',
            highlight: '#FF5A5E',
            label: 'Red'
        },
            {
            value: 50,
            color: '#46BFBD',
            highlight: '#5AD3D1',
            label: 'Green'
        },
        {
            value: 100,
            color: '#FDB45C',
            highlight: '#FFC870',
            label: 'Yellow'
        }];
    }
}

htmlファイル

<p-pieChart [value]="data" width="300" height="300"></p-pieChart>

これだけでは不十分です。次の css および js ファイルを追加する必要があると思いますが、場所がわかりません。

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/delta/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.css" />
<script src="node_modules/primeui/primeui-ng-all.js"></script>

また、前の手順が正しいかどうかもわかりません。現時点でエラーが発生しました：

例外: ReferenceError: チャートが定義されていません

4

2 に答える 2

1

ああ、このページによると、 Chart.js も含まれているはずです!

于 2016-03-27T00:44:45.013 に答える
0

この返信は少し遅れますが、とにかく。

私はあなたとほとんど同じ問題を抱えていて、何時間も働いた後、私はそれを解決しました。PrimeNG で言われたように、 PrimeNgを実行するためのすべての手順を実行しましたが、アプリケーションはまだ実行されていません。

私の問題は私のSystem.JSファイルにあることがわかりました。

これは私のものSystem.JSで、それで PrimeNG を実行しました。そして、私は自分<script>のをそのように配置しました:

<!-- CSS for PrimeUI -->
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/bluesky/theme.css" />
<link rel="stylesheet" href="font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>

<!-- JS for NG-Prime-->
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

<script>
    System.config({
        defaultJSExtensions: true,
        packages: {
             app: {
        format: 'register'
            }
        },
        map: {
            'angular2': 'node_modules/angular2',
            'primeng': 'node_modules/primeng'
        }
    });
    System.import('app/boot').then(null, console.error.bind(console));
</script>

<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

それがあなたを助けることができるかどうかはわかりませんが、そう願っています。

Chart.js を使ったことがないので、お手伝いできません。

于 2016-04-29T12:04:57.903 に答える