Angular

事前定義されたテンプレートを使用してコンポーネントを作成する

JetBrains Rider は、Angular コンポーネントを作成するための事前定義された ライブテンプレート を、 a-component、 a-component-inline 、および a-component-root などで提供します。

ライブテンプレートの詳細については、 ライブテンプレートを参照してください。

事前定義されたテンプレートの完全なリストを表示するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 エディター | ライブテンプレート に移動して、 Angular ノードを展開します。

1. エディターで、 Ctrl+J を押し、リストから適切なテンプレート（たとえば、 a-component ）を選択してから、 Enter を押します。

2. JetBrains Rider はコンポーネントスタブを生成し、キャンバス付きフィールドにキャレットを配置し、そこでコンポーネント名を指定するのを待ちます。 コンポーネント名を入力すると、 Angular スタイルガイド(英語)に従ってセレクターの名前とテンプレート URL が自動的に入力されます。

3. 必要に応じて、インスペクションポップアップを使用して新しいコンポーネントを スタンドアロン(英語)にします。

   

WebStorm ブログで、 コードスニペットの使用と作成(英語)の変数を使用してテンプレートをカスタマイズする方法を学びます。

コンポーネントフォルダーを作成する

JetBrains Rider では、複数の Angular コンポーネントファイルを一度のアクションで作成し、それらすべてを個別のフォルダーに配置することも可能です。 これを行うには、いくつかの子テンプレートを含むファイルテンプレートを使用する必要があります。 親テンプレートからファイルを作成すると、子テンプレートの関連ファイルが自動的に生成されます。

たとえば、ロジック用の example.component.ts 、テンプレート用の example.component.html 、スタイル用の example.component.css など、多数のコンポーネントファイルを含む example フォルダーを作成するとします。 2 つの親テンプレートを含むファイルテンプレートを作成すると、3 つのファイルすべてが一度に生成され、別のフォルダーに配置されます。

1. 設定 ダイアログ（Ctrl+Alt+S ）で、 エディター ｜ ファイルおよびコードテンプレート を選択します。

2. まず、TypeScript コンポーネントファイル用のテンプレートを作成します：

   1. ファイル タブで、ツールバーの 追加 ボタン () をクリックします。

      

      新しい 名前未設定 テンプレートがリストに追加されます。

   2. 右側のペインで、テンプレート名を指定し、 Angular コンポーネント​ とし、ファイル拡張子として component.ts とします。

   3. 「ファイル名 」フィールドに $NAME/$NAME と入力します。

   4. 必要に応じて、コードテンプレートを追加します。例:

      /* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';

   

   適用 をクリックします。

3. 関連する HTML ファイルの子テンプレートを作成します：

   1. 親テンプレート Angular コンポーネント​ を選択し、ツールバーの 子テンプレートファイルの作成 ボタン をクリックします。

      

      子テンプレートが Angular コンポーネント​ テンプレートに追加されます。

   2. 右側のペインで、 ファイル名 フィールドに $NAME/$NAME と入力し、 component.html 拡張子を指定します。

   

   適用 をクリックします。

4. 関連するスタイルシートの子テンプレートを作成します。

   1. 親テンプレート Angular コンポーネント​ を選択し、ツールバーの をクリックします。 子テンプレートが Angular コンポーネント​ テンプレートの下に追加されます。

   2. 右側のペインで、 ファイル名 フィールドに $NAME/$NAME と入力し、 component.css 拡張子を指定します。

5. OK をクリックしてテンプレートを保存します。

6. コンポーネントファイルを作成します。

   コンポーネントファイルを保存するフォルダーのコンテキストメニューから、 新規 | Angular コンポーネント を選択します。 開いたダイアログで、フォルダーとその中のコンポーネントファイル（この例では example ）に使用される名前を指定します。

   

テンプレートからコンポーネントを抽出する

Angular コンポーネントを抽出しますリファクタリングは、 angular.json ファイル内の schematic 設定を考慮して、 ng generate component を実行することで機能します。

1. HTML テンプレートファイルで、Angular コンポーネントに抽出するコード箇所を選択します。

2. 選択のコンテキストメニューから リファクタリング | コンポーネントの抽出 を選択します。

   または、 Ctrl+Alt+Shift+T を押して、 リファクタリング ポップアップから コンポーネントの抽出 を選択します。

   

3. 開いたダイアログで、新しいコンポーネントの名前を指定します。

シグナルを作成する

1. 必要な関数を書きます。 JetBrains Rider はインスペクションを実行し、新しい関数を未解決としてハイライトします。

2. ハイライトされた関数の上にマウスを置き、ポップアップ内の シグナル「<関数名>」を作成 リンクをクリックします。

   

   あるいは、ハイライトされた機能にカーソルを置き、 Alt+Enter を押して、 シグナル「<関数名>」を作成 を選択します。

   

3. JetBrains Rider は、新しいシグナルのスタブが生成されるコンポーネント TypeScript ファイルを表示します。 必要に応じてプレースホルダーを入力します。

Angular シグナルのハイライトを構成する

1. Ctrl+Alt+S を押して設定を開き、 エディター | カラースキーム | Angular テンプレート を選択します。

2. リストから シグナル を選択し、 フォアグラウンド の横にある色の表示をクリックします。

   

3. 好みの色を選択し、 適用 をクリックします。

• Angular HTML テンプレートで、コードフラグメントを選択し、 Ctrl+Alt+T を押して、リストから囲んでいるコードを選択します。

  

1. メインメニューから ファイル | 新規 を選択するか、 エクスプローラー ツールウィンドウ (Alt+1) で Alt+Insert を押してから、 Angular の依存関係 を選択します。

2. リストから、追加するライブラリを選択します。 リストには、 ng add で確実にインストールできるライブラリが表示されます。 リストにないパッケージをインストールするには、その末尾までスクロールして 上記にないパッケージをインストールする リンクをダブルクリックし、表示されるダイアログでパッケージ名を指定します。

3. ウィザードの手順に従ってください。

   以下の例は、Angular Material をプロジェクトに追加する方法を示しています。