コンポーネントクラスの更新

Angularでは、コンポーネントのロジックと動作は、コンポーネントのTypeScriptクラスで定義されます。

このアクティビティでは、コンポーネントクラスの更新方法と、補間の使用方法について学習します。

1. cityというプロパティを追加

   AppComponentクラスにcityというプロパティを追加することで、コンポーネントクラスを更新します。

         
   export class AppComponent {  city = 'San Francisco';}
       

   cityプロパティはstring型ですが、TypeScriptでの型推論により、型を省略できます。cityプロパティはAppComponentクラスで使用でき、コンポーネントテンプレートで参照できます。

   
   

   テンプレートでクラスプロパティを使用するには、{{ }}構文を使用する必要があります。

2. コンポーネントテンプレートの更新

   以下のHTMLに一致するように、templateプロパティを更新します。

         
   template: `Hello {{ city }}`,
       

   これは補間の例であり、Angularテンプレート構文の一部です。これにより、テンプレートに動的なテキストを配置するだけでなく、多くのことができます。この構文を使用して、関数呼び出し、式の記述なども実行できます。

3. 補間のさらなる練習

   試してみてください - 内容が1 + 1である別の{{ }}を追加します。

         
   template: `Hello {{ city }}, {{ 1 + 1 }}`,
       

   Angularは{{ }}の内容を評価し、出力結果をテンプレートにレンダリングします。

これはAngularテンプレートで可能なことのほんの一部です。さらに学び続けて、詳細を調べてください。