Polkadot角跡を使用する方法

このガイドではpolkadot-angular-identicon , 基板ベースのチェーンの角度アプリケーションでアイコンをレンダリングできるジェネリックアイデンティティアイコン.
入力によってinslallでない場合は、角CLIがインストールされていると仮定しますnpm install -g @angular/cli .
CLIインストール後はng --version そして、それはより多くの情報のための角度CLIバージョンを表示しますこのリンクを訪問してください.

アングルプロジェクト

角プロジェクトの型を作成するには、次の手順に従います.ng new my-project そして、私のプロジェクトは作成されるでしょう.
例では、プロジェクトを作成しましょうpai ( polkadot角座標系のように😎)ng new pai そして、あなたはこのようなものが表示されます

インストールpolkadot-angular-identicon NPM依存
お気に入りのIDEを使用してPAIプロジェクトを開き、IDEの端末からコンポーネントをインストールしますnpm i polkadot-angular-identicon .
パッケージがインストールされたらapp.module.ts srcの下のプロジェクトのファイルとPolkadotIdentIconModule インポートセクション(これは角モジュールをインポートしたセクションです).
The PolkadotIdentIconModule インポートまたはエクスポートセクションの他の角機能モジュールでも使用できます.

コンポーネントの使用法

今私たちがしなければならないことは、我々のリンクスのテンプレートコンポーネントの中で、Identiticonを使用することですpai プロジェクトは、それを使用しましょうapp.component.html ファイル.
開けるapp.component.html ファイルを削除し、コンテンツを削除します.

<h3>Polkadot icon theme  with default size</h3>
<polkadot-angular-identicon address="5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty" theme="polkadot"></polkadot-angular-identicon>
<br>

<h3>beachball icon theme  with size of 80 </h3>
<polkadot-angular-identicon address="5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty" theme="beachball" [size]="80"></polkadot-angular-identicon>
<br>

<h3>jdenticon icon theme  with size of 120</h3>
<polkadot-angular-identicon  address="5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty" theme="jdenticon" [size]="120"></polkadot-angular-identicon>

このステップではほとんど完了ですが、いくつかの最終的なタッチが必要です
パッケージを開きます.JSONファイルを閉じ、次のブラケットを閉じます.

"browser": {
    "crypto": false
}

開けるtsconfig.app.json 追加"node" にtypes プロパティcompilerOptions セクション

{
 ...
  "compilerOptions": {
     ...
    "types": ["node"]
  },
...
 }

オープンtsconfig.json そして、compilerOptions 以下を加えてください

    "paths": {
      "crypto": ["./node_modules/crypto-browserify"],
      "stream": ["./node_modules/stream-browserify"]
      }

そして最後のものはpolyfills.ts ファイル下src そして最後に行の下にスニペットを追加する

(window as any).global = window;
(window as any).Buffer = (window as any).Buffer || require('buffer').Buffer;

アプリを実行する
アプリケーションをテストするにはng serve でブラウザを開きますlocalhost:4200コマンドを入力することもできますng serve -o そしてそれは自動的にデフォルトのブラウザでアプリケーションを開きます.