Angular 2-テンプレート

コンポーネントの章で、次のテンプレートの例をすでに見ました。

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

これは「インラインテンプレート」と呼ばれます。テンプレートを定義する他の方法があり、それはtemplateURLコマンドを介して実行できます。コンポーネントでこれを使用する最も簡単な方法は次のとおりです。

構文

templateURL:
viewname.componentl

パラメーター

viewname -これはアプリコンポーネントモジュールの名前です。

ビュー名の後、コンポーネントをファイル名に追加する必要があります。

インラインテンプレートを定義する手順は次のとおりです。

ステップ1 *-app.componentlというファイルを作成します。これには、ビューのhtmlコードが含まれます。

アプリコンポーネント

ステップ2 *-上記で作成したファイルに次のコードを追加します。

<div>{{appTitle}} finddevguides </div>

これは単純なdivタグを定義し、app.componentクラスのappTitleプロパティを参照します。

ステップ3 *-app.component.tsファイルに、次のコードを追加します。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

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

上記のコードから、注目できる唯一の変更は、appフォルダーにあるapp.componentlファイルへのリンクを提供するtemplateURLからの変更です。

ステップ4 *-ブラウザでコードを実行すると、次の出力が得られます。

コードを実行

出力から、テンプレートファイル（app.componentl）ファイルがそれに応じて呼び出されていることがわかります。

Angular2-templates

Angular 2-テンプレート

構文

パラメーター