HTML要素の属性で角度2の外挿を使用するには？

Question

いくつかのデータを非カスタムhtml要素属性にバインドしたいと思います。ただし、属性の{{}}は外挿されません。 私は他の関連記事を "Angularjs templateUrl fails to bind attributes inside ng-repeat"と見てきました。これはカスタムディレクティブのための1つの解決策です。

例えば、私が持っている：

size = 500; 

を私が正しく動作するには、次のSVG要素をしたい：

<svg xmlns="http://www.w3.org/2000/svg/" width="{{size}}" height="{{size}}"> 
<rect width="{{size}}" height="{{size}}" fill="#DCB35C"/> 
</svg> 

私は角2でこれを行う必要がありますどのように？

Answer 1

短い答え

ようattributeにそれを配置する必要がありDOMプロパティoneはattribute binding syntaxを使用する必要があります。それ以外の場合は、Angular 2が "template parse error"を報告します。

例：お使いの場合には

• [attr.my-custom-attribute]="myComponentValue"
• [attr.colspan]="1 + 1"

、SVG要素は、幅と高さのDOMプロパティを持っていますが、彼らはあなたが期待するものではありません。彼らはSVGAnimatedLengthオブジェクトです。彼らの価値を古い方法にしようとすると何もしません。そのため、テンプレートが期待通りに機能せず、エラーが報告されません。結合構文の属性に切り替えると、この動作を修正します：[attr.width]="width" [attr.height]="height"深さの説明では

バインディングは角1と角2での作業属性方法の間には大きな概念の違いがあります。カスタム属性を設定するアンギュラ1では

は、次のようになります。

• <div a-custom-attribute="I am a custom {{ 'attribute' }}">Text Content</div>
• <div ng-attr-a-custom-attribute="I am a custom {{ 'attribute' }}">Text Content</div>からthis syntaxは（そうでない場合は熱心にブラウザによって処理されるだろう属性にバインドすることができます例えばSVG要素のサークル[ ：CX]属性、IMG要素のsrc属性など）の角2では

、別の話があります

Angular 2は、DOMプロパティにバインドするHTML属性にバインドする代わりに、a new mental model：が導入されました。 the distinction between an HTML attribute and a DOM propertyを理解することは、角度2の結合がどのように機能するかを理解する上で重要です。 DOMプロパティにバインド

は次のようになりますことがあります。

• <img [src]="heroImageUrl">
• <img bind-src="heroImageUrl">
• <img src="{{ heroImageUrl }}"> - これは、誰かがAngularJS 1バックグラウンドを持っている場合は特に、少し混乱に見えますが、角度2つの並進可能これらの補間は、ビューをレンダリングする前に対応するプロパティーバインディングに入れます（source）。 としてMarkがコメントセクションで指摘され、補間が評価された後、の結果が文字列（source）に変換されることを覚えておくことが重要です。これは、この構文が文字列値の代入に限定されることを意味します。

  // Template parse errors: 
  // Can't bind to 'colspan' since it isn't a known native property 
  <tr><td colspan="{{1 + 1}}">Three-Four</td></tr> 
  
  // Template parse errors: 
  // Can't bind to 'madeUpProperty' since it isn't a known native property 
  <div [madeUpProperty]="My custom {{ 'madeUpProperty' }}"></div> 
  

  これは何のDOMプロパティが存在しない場合に1がattribute binding syntaxを使用しなければならないことを意味します。名前はDOMプロパティと一致しなかった場合、角度2「は、未知のネイティブプロパティ」エラーを報告することを

注意縛る

最後に、私は後者はに制限されているので、彼は要素のDOMプロパティを変更したい時はいつでも良い経験則として1が常に補間（例えばsrc="{{heroImageUrl}}"）の賛成でproperty binding's syntax（例えば[src]="heroImageUrl"）を使用するべきであると信じてい文字列値のみを渡します。別の理由は、誰かがAngularJS1の背景を持っている場合、これは属性とDOMプロパティの設定の混乱を減らすはずです。

Answer 2

あなたは[attr.*]のように結合する前にattrプレフィックスを持つことにより、結合属性を使用してwidth & heightをバインドする必要があります。

マークアップ

<svg xmlns="http://www.w3.org/2000/svg/" [attr.width]="size" [attr.height]="size"> 
    <rect [attr.width]="width" [attr.height]="height" fill="#DCB35C" /> 
</svg> 

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 

@Component({ 
    selector: 'demo-app', 
    templateUrl: 'src/app.html', 
    pipes: [] 
}) 
export class App { 
    width: number = 100; 
    height: number=100; 
    size: number=100; 
    constructor() { } 
} 

bootstrap(App); 

Demo Plunkr

---

としては、いくつかの定数strinを有することによって、大きさの値を追加する要求されたクラスHTML属性との間に1マッピング：1が存在しない場合、G値は、あなただけ[attr.width]="size + '5'"

<svg xmlns="http://www.w3.org/2000/svg/" [attr.width]="size" [attr.height]="size"> 
    <rect [attr.width]="width + '5'" [attr.height]="height + '5'" fill="#DCB35C" /> 
</svg> 

Updated Plunkr

Answer 3

<svg xmlns="http://www.w3.org/2000/svg/" [attr.width.px]="size" [attr.height.px]="size"> 
    <rect [attr.width.px]="width" [attr.height.px]="height" fill="#DCB35C" /> 
</svg>