1。説明
Angular2テンプレートは、コンポーネントの外観を表示するために使用されます。その使用法は、基本的にHTML構文と同じです。最も単純なAngular2テンプレートは、HTMLコードの一部です。 Angular Templateの構文には、主に次の部分が含まれています。
l直接結合
l補間式
l属性結合
Lイベントバインディング
l双方向結合
Lスタイルのバインディング
lテンプレートと *
lローカル変数
まず、以下に示すように、テンプレートの例を見てみましょう。
import { Component, OnInit } from '@angular/core';@Component({selector: 'ui-demo',template: ` <form role="form"><div><legend>title</legend></div><span>attention: {{msg}}</span><div><div>name</div><input type="text" id="name" name="name" [attr.size]="size" [placeholder]="name"></div><div><div>age</div><input type="text" (change)="change()" id="age" name="age" [placeholder]="age"></div><div><div>sex</div><input type="text" [(ngModel)]="sex" id="sex" name="sex" [PlaceHolder] = "Sex"> </div> <div *ng-if = "needpwd"> <div> pwd </div> <input #inpwd type = "password" [（ngmodel）] = "pwd" "id" id = "pwd" name = "pwd"> <button = "" " （click）= "show（inpwd.value）"> warn </button> </div> <div> <div [color.color] = "color"> <button type = "submit" [class.btn-primary] = "isprimary"> submit </button> </div> </div> </form> `}） 「注意事項 "; name：string =" name "; size：number = 4; age：number = 15; sex：string = 'male'; needpwd：boolean = true; pwd：string = ''; color：string =" red "; isprimary：boolean = true; constructor（）{} ngoninit（）{} shing（ {console.log（$ event）;}}1.1直接結合
たとえば、文字列を対応する属性に直接バインドします。たとえば、文字列フォームをタイトル属性にバインドします
<伝説>タイトル</legend>
1.2補間式
補間式は{{{}}の形式で表され、コンポーネント内の対応する式の値は表示用のテンプレートに結合されます。たとえば、MSG式の値は次のようにコンポーネントに表示されます。
<span>注意：{{msg}} </span>1.3属性バインディング
属性結合は[]の形で表現され、式の値を対応する属性に結合します。たとえば、コンポーネントの名前式値をプロパティプレースホルダーに結合します
<div> <div> name </div> <入力型= "text" id = "name" name = "name" [placeholder] = "name"> </div>
属性に結合した要素に対応する属性がある場合、[xx]を使用して直接バインドできます。ただし、要素に対応する属性がない場合、[attr.xxx]を使用して、対応する属性情報をバインドするポイントを追加する必要があります。
<div> <div> name </div> <入力型= "text" id "name" name = "name" [attr.size] = "size" = "name"> </div>
1.4スタイルバインディング
スタイルバインディングには、主に2つの便利なインラインスタイルのスタイルと外部スタイルのクラスバインディングが含まれます。
1.4.1スタイルバインディング
スタイルのバインディングは、特性バインディングと構文的に類似しています。ただし、四角い括弧内の部分は要素の属性名ではなく、ドット（。）が続くスタイルのプレフィックス、次にCSSスタイルの属性名が含まれます。 [style.style-perporty]に示すように、プロパティが指定された要素で使用されていることを示します。例えば
<div> <div [style.color] = "color"> <button type = "submit" [class.btn-primary] = "isprimary"> submit </button> </div> </div>
1.4.2クラスバインディング
CSSクラスの結合は、特性結合と構文的に類似しています。ただし、正方形の括弧内の部分は要素の属性名ではなく、ドット（。）が続くクラスのプレフィックスが含まれ、次に、[class.class-name]に示すように、CSSクラスの名前で構成されます。この要素でCSSクラスを使用するか、CSSクラスを削除するかを示します。次の値が当てはまる場合、テーブルが使用されます。 falseはそれを削除することを意味します。
<div> <div [style.color] = "color"> <button type = "submit" [class.btn-primary] = "isprimary"> submit </button> </div> </div>
1.5 * with <template>
まず、 *および<テンプレート>の例を見てみましょう。
<div *ng-if = "needpwd"> <div> pwd </div> <入力型= "password" [（ngmodel）] = "pwd" id = "pwd" name = "pwd"> </div>
* HTMLレイアウトを変更するためにテンプレートを必要とする手順の読みや書き込みが簡単になる構文糖です。 ngfor、ngif、およびngswitchはすべて、<Template>タグに包まれた要素サブツリーを追加または削除します。 *プレフィックス構文を使用して<Template>タグを無視します。復元されたコードは次のとおりです
<テンプレート[ngif] = "needpwd"> <div> <div> pwd </div> <input type = "password" [（ngmodel）] = "pwd" id = "pwd" name = "pwd"> </div> </template>
1.6ローカル変数
ローカル変数は＃xxxの形で表されます。この式を要素で使用する場合、XXXを使用して要素を表すことができます。ローカル変数は、同じ要素、兄弟要素、または任意の子要素で使用できます。以下に示すように、この変数を使用して兄弟ノードの要素を表すことができます
<div *ng-if = "needpwd"> <div> pwd </div> <input #inpwd type = "password" [（ngmodel）] = "pwd" id "pwd" name = "pwd"> <button = "button"（click）= "show（inpwd.value）"
1.7イベントバインディング
属性結合は（）の形で表され、コンポーネントの方法を対応するイベントに結合します。たとえば、変更関数を変更イベントに結合し、変更イベントが発生すると変更関数がトリガーされます。
<div> <div> age </div> <input type = "text"（change）= "change（）" id = "age" name = "agh" [placeholder] = "age"> </div>
1.8双方向結合
双方向結合は[（（）]メソッドを使用して、双方向の結合が属性結合とイベント結合の組み合わせであることを表します。最も一般的に使用される双方向結合は、[（ngmodel）] =” xxx”をフォームに使用することです。フォームでデータを変更すると、バインドされたデータ項目が変更されます。以下に示すように：フォームが変更するために入力されている場合、性変数も同期的に変更されます
<div> <div> sex </div> <入力タイプ= "text" [（ngmodel）] = "sex" id = "sex" name = "sex" = "sex"> </div>
上記は、編集者が紹介したAngular2テンプレート文法の関連知識です。それがあなたに役立つことを願っています。ご不明な点がございましたら、メッセージを残してください。編集者はあなたに時間内に返信します。 Wulin Network Webサイトへのサポートに感謝します！