12

PrimeNG をインストールするために行った手順は次のとおりです。

  1. npm install primeng --save npm install primeui --save

  2. Index.htmlを更新します: ( 404 file not foundエラー を取り除くために、ディレクトリprimengとprimeuiを node_modules からassetsフォルダーにコピーする必要がありました)

    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/styles.css">
<link rel="stylesheet" href="assets/primeui/themes/omega/theme.css">
<link rel="stylesheet" href="assets/primeui/primeui-ng-all.min.css">`

  3. test.component.ts を更新します。

    import {Calendar} from '../../assets/primeng/primeng';
....
export class TestComponent {
     dateValue:string;
}

  4. test.component.html を更新します。

    <p-calendar formControlName="date"></p-calendar>

結果: ページに何も表示されません。

何か不足していますか？

編集1:

  1. angular-cliを使用してプロジェクトをインストールしたと言うことが重要だと思います
  2. <p-calendar [(ngModel)]="dateValue"></p-calendar>test.component.html に追加すると、

    エラー: キャッチされていません (約束されています): 参照または変数に代入できません!

編集2:

angular-cliを使用していない別のプロジェクトで試しました： 

    <link rel="stylesheet" href="node_modules/primeui/themes/omega/theme.css" />
    <link rel="stylesheet" href="node_modules/primeui/primeui-ng-all.min.css" />
    ....
    import {Calendar} from 'primeng/primeng';
    ....
    <p-calendar formControlName="date"></p-calendar>

追加するとすぐにdirectives:[Calendar]エラーが発生します:

http://localhost:3000/primeng/primeng 404 (見つかりません)
エラー: エラー: XHR エラー (404 見つかりません) http://localhost:3000/primeng/primeng の読み込み中(…)

ここに画像の説明を入力

4

9 に答える 9

5

ドキュメントページの下部を参照してください

依存関係 jQuery UI Datepicker および DateTimePicker

したがって、これらの行を index.html に埋め込む必要がありますが、埋め込んでいないと思いますので、これを使用してみてください

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

また、@componentの下のディレクティブのリストにカレンダーをリストすることを忘れないでください

アップデート

  • primeng のすべての css ファイルをファイルに移動index.htmlしangular-cli.jsonます。このような

    "styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeui/primeui-ng-all.min.css"
     ....
  ],

すべてのprimeng jsファイルもangular-cli.jsonファイルに移動します。

  • 現在、primeng のすべてのコンポーネントはモジュールに変換されているため、すべてのコンポーネントをメイン モジュール ファイルにインポートする必要があります。(私の場合は app.module.ts ファイル)。
于 2016-07-01T07:31:53.040 に答える
1

index.html に primeui-ng-all.min.js を追加してみてください

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

これが役立つかどうかを確認してください。

于 2016-07-01T07:58:15.683 に答える
0

PrimeNG をインストールする

npm install primeng --save

ここに画像の説明を入力

プライム アイコンをインストールする

npm install primeicons --save

ここに画像の説明を入力

Font Awesomeをインストールする

npm install font-awesome --save

ここに画像の説明を入力

Angular CDK をインストールする

npm install @angular/cdk --save

ここに画像の説明を入力

ここでpackage.jsonに移動すると、次のprimeng依存関係が表示されます ここに画像の説明を入力

angular.json を開き、styles セクションに以下を追加します。

"./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css",

ここに画像の説明を入力

Angular アプリケーションに PrimeNG コンポーネントを追加する Angular に PrimeNG コンポーネントを追加するには、 以下の手順に従います。 ここに画像の説明を入力

参照 - https://www.codeusingjava.com/angular/primeng/prime1
参照 - https://youtu.be/4Wk4RgYN9ZQ

于 2020-02-06T10:44:46.747 に答える
0

これは Primeng セットアップの完全なドキュメントです: https://www.primefaces.org/primeng/#/setup

ここでカレンダーを追加する方法: https://www.primefaces.org/primeng/#/calendar

于 2020-01-10T06:45:38.523 に答える