Angular 2-コンポーネント

コンポーネントは、Angular JSアプリケーションの論理的なコードです。コンポーネントは以下で構成されます-

テンプレート-これは、アプリケーションのビューをレンダリングするために使用されます。これには、アプリケーションでレンダリングする必要があるHTMLが含まれます。この部分には、バインディングとディレクティブも含まれます。
クラス-これはCなどの言語で定義されたクラスのようなものです。これにはプロパティとメソッドが含まれます。これには、ビューをサポートするために使用されるコードが含まれています。 TypeScriptで定義されています。
Metadata -これには、Angularクラス用に定義された追加データがあります。デコレータで定義されます。

app.component.tsファイルに移動して、最初のAngularコンポーネントを作成しましょう。

次のコードをファイルに追加して、各側面を詳細に見てみましょう。

クラス

クラスデコレータ。クラスはTypeScriptで定義されています。このクラスは通常、TypeScriptで次の構文を持ちます。

構文

class classname {
   Propertyname: PropertyType = Value
}

パラメーター

クラス名-これはクラスに与えられる名前です。
Propertyname -これは、プロパティに与えられる名前です。
PropertyType -TypeScriptは厳密に型指定されているため、プロパティに型を指定する必要があります。
値-これはプロパティに与えられる値です。

例

export class AppComponent {
   appTitle: string = 'Welcome';
}

例では、次のことに注意する必要があります-

AppComponentというクラスを定義しています。
exportキーワードは、Angular JSアプリケーションの他のモジュールでコンポーネントを使用できるようにするために使用されます。
appTitleはプロパティの名前です。
プロパティには文字列のタイプが与えられます。
プロパティには「ようこそ」という値が与えられます。

テンプレート

これは、アプリケーションでレンダリングする必要があるビューです。

構文

Template: '
   <HTML code>
   class properties

パラメーター

* HTMLコード*-これは、アプリケーションでレンダリングする必要があるHTMLコードです。
クラスのプロパティ-これらは、テンプレートで参照できるクラスのプロパティです。

例

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>

例では、次のことに注意する必要があります-

アプリケーションでレンダリングされるHTMLコードを定義しています
また、クラスからappTitleプロパティを参照しています。

メタデータ

これは、Angular JSクラスを追加情報で装飾するために使用されます。

クラス、テンプレート、メタデータで完成したコードを見てみましょう。

例

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

上記の例では、次のことに注意する必要があります-

importキーワードを使用して、角度/コアモジュールから「コンポーネント」デコレータをインポートします。
次に、デコレータを使用してコンポーネントを定義します。
コンポーネントには「my-app」というセレクターがあります。これは、メインhtmlページで使用できるカスタムhtmlタグに他なりません。

次に、コード内のインデックスファイルに移動します。

デモアプリ

bodyタグに、コンポーネント内のカスタムタグへの参照が含まれるようになりました。したがって、上記の場合、bodyタグに次のコードが含まれていることを確認する必要があります-

<body>
   <my-app></my-app>
</body>

出力

ブラウザに移動して出力を確認すると、出力がコンポーネントにそのまま表示されていることがわかります。

出力

Angular2-components

目次

Angular 2-コンポーネント

クラス

構文

パラメーター

例

テンプレート

構文

パラメーター

例

メタデータ

例

出力