Angularの属性バインディングを使用すると、属性の値を直接設定できます。 属性バインディングを使用すると、アクセシビリティを向上させ、アプリケーションを動的にスタイル設定し、複数のCSSクラスまたはスタイルを同時に管理できます。
構文
属性バインディングの構文は プロパティバインディング に似ていますが、角括弧で囲まれた要素プロパティの代わりに、属性名の前に attr プレフィックスとドットを付けます。
次に、属性値を文字列に変換される式で設定します。
<p [attr.attribute-you-are-targeting]="expression"></p>
HELPFUL: 式が null または undefined に解決されると、Angularは属性を完全に削除します。
ARIA 属性のバインディング
属性バインディングの主なユースケースの1つは、ARIA属性を設定することです。
ARIA属性にバインドするには、次のように入力します。
src/app/app.component.html
<h1>Attribute, class, and style bindings</h1><h2>Attribute binding</h2><table border=1> <!-- expression calculates colspan=2 --> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <!-- ERROR: There is no `colspan` property to set! <tr><td colspan="{{ 1 + 1 }}">Three-Four</td></tr> --> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="1 + 1">Three-Four</td></tr> <tr><td>Five</td><td>Six</td></tr></table><div> <!-- create and set an aria attribute for assistive technology --> <button type="button" [attr.aria-label]="actionName">{{ actionName }} with Aria</button></div><hr /><h2>Styling precedence</h2><h3>Basic specificity</h3><!-- The `class.special` binding overrides any value for the `special` class in `classExpression`. --><div [class.special]="isSpecial" [class]="classExpression">Some text.</div><!-- The `style.border` binding overrides any value for the `border` property in `styleExpression`. --><div [style.border]="border" [style]="styleExpression">Some text.</div><h3>Source specificity</h3><!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.--><comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding></comp-with-host-binding><!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. --><div> <comp-with-host-binding [style.color]="color" dirWithStyleBinding></comp-with-host-binding></div><h3>Dynamic vs static</h3><!-- If `[class.special]` equals false, this value overrides the `class="special"` below --><div class="special" [class.special]="false">Some text.</div><!-- If `styleExpression` has a value for the `border` property, this value overrides the `style="border: dotted darkblue 3px"` below --><div style="border: dotted darkblue 3px" [style]="styleExpression">Some text.</div><div class="readability"> <comp-with-host-binding dirWithHostBinding></comp-with-host-binding></div><app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>
colspan へのバインディング
属性バインディングのもう1つの一般的なユースケースは、テーブルの colspan 属性です。 colspan 属性にバインディングすると、テーブルをプログラムで動的に保つことができます。 アプリケーションがテーブルに表示するデータの量に応じて、行がまたがる列の数は変わる可能性があります。
<td> 属性 colspan で属性バインディングを使用するには
- 次の構文を使用して
colspan属性を指定します。[attr.colspan]。 [attr.colspan]を式に等しく設定します。
次の例では、colspan 属性を式 1 + 1 にバインドしています。
src/app/app.component.html
<h1>Attribute, class, and style bindings</h1><h2>Attribute binding</h2><table border=1> <!-- expression calculates colspan=2 --> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <!-- ERROR: There is no `colspan` property to set! <tr><td colspan="{{ 1 + 1 }}">Three-Four</td></tr> --> <!-- Notice the colSpan property is camel case --> <tr><td [colSpan]="1 + 1">Three-Four</td></tr> <tr><td>Five</td><td>Six</td></tr></table><div> <!-- create and set an aria attribute for assistive technology --> <button type="button" [attr.aria-label]="actionName">{{ actionName }} with Aria</button></div><hr /><h2>Styling precedence</h2><h3>Basic specificity</h3><!-- The `class.special` binding overrides any value for the `special` class in `classExpression`. --><div [class.special]="isSpecial" [class]="classExpression">Some text.</div><!-- The `style.border` binding overrides any value for the `border` property in `styleExpression`. --><div [style.border]="border" [style]="styleExpression">Some text.</div><h3>Source specificity</h3><!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.--><comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding></comp-with-host-binding><!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. --><div> <comp-with-host-binding [style.color]="color" dirWithStyleBinding></comp-with-host-binding></div><h3>Dynamic vs static</h3><!-- If `[class.special]` equals false, this value overrides the `class="special"` below --><div class="special" [class.special]="false">Some text.</div><!-- If `styleExpression` has a value for the `border` property, this value overrides the `style="border: dotted darkblue 3px"` below --><div style="border: dotted darkblue 3px" [style]="styleExpression">Some text.</div><div class="readability"> <comp-with-host-binding dirWithHostBinding></comp-with-host-binding></div><app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>
このバインディングにより、<tr> は2つの列にまたがります。
HELPFUL: プロパティ名と属性名の間に違いがある場合があります。
colspan は <td> の属性ですが、大文字の "S" を使った colSpan はプロパティです。
属性バインディングを使用する場合は、小文字の "s" を使った colspan を使用してください。
colSpan プロパティへのバインディング方法の詳細については、プロパティバインディング の colspan と colSpan セクションを参照してください。