Angular のテンプレート参照変数の簡単な分析

著者：Eve Cole 更新時間：2022-06-09 17:33:21

この記事では引き続き Angular を学習し、Angular のテンプレート参照変数について説明します。お役に立てば幸いです。

<input type="text" [value]="value" #name>

1. テンプレート参照変数には、DOM 要素、Angular コンポーネント (命令)、要素、TemplateRef、または Angualr 内の Web コンポーネントへの参照を指定できます。 template であり、それが何であるかは、(ディレクティブを使用した介入なしで) 関連付けられている要素によって異なります。前のサンプルコードと同様、テンプレート参照変数name DOM 要素<input>への参照です。 [関連チュートリアルの推奨事項:「angular チュートリアル」]

<app-component #component [input]="variable"></app-component>
{{ コンポーネント.入力 }}
{{component.func() }}

テンプレート参照変数を通じて、 app-componentコンポーネントのインスタンス参照を取得します。これにより、テンプレート内のapp-componentコンポーネント内のメンバーに簡単にアクセスできるようになります。
2. Angular は、宣言した変数の場所に基づいてテンプレート変数に値を割り当てます。

コンポーネント上で変数を宣言すると、その変数はコンポーネントインスタンスを参照します。
標準の HTML マークアップで変数を宣言すると、その変数はその要素を参照します。
<ng-template>要素で変数を宣言すると、その変数はテンプレートを表すTemplateRefインスタンスを参照します。
変数の右側に#var="ngModel"などの名前が指定されている場合、変数は要素上のexportAs名を持つディレクティブまたはコンポーネントを参照します。

3. テンプレート変数でNgForm使用する<br/> ここでのNgFormディレクティブは、ディレクティブのexportAs名を参照することで、さまざまな値を参照する方法を示しています。次の例では、テンプレート変数itemForm HTML 内に 3 回現れます。

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">名前</label>
  <input type="text" id="name" class="form-control" name="name" ngModel が必要です />
  <button type="submit">送信</button>
</form>
 
<div [hidden]="!itemForm.form.valid">
  <p>{{ submitMessage }}</p>
</div>

※ ngForm属性値が存在しない場合、itemFormで参照される値が<form>要素となります。 Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......

そして、 NgForm使用した後、 itemFormは NgForm ディレクティブへの参照になります。これを使用して、フォーム内の各コントロールの値と有効性を追跡できます。

ネイティブの<form>との比較

)

<form>異なる要素では、 NgFormディレクティブにはform属性があります。 itemForm.form.validが無効な場合、 NgFormのform属性により

、リストページを作成するために angular を使用する場合、テンプレート参照変数が使用されることがよくあります

。

使用済み：