web-dev-qa-db-ja.com

Angular 2：角かっこがある場合とない場合のプロパティバインディングの違いは？

角かっこなしでプロパティバインドすることが可能であることに気づきました。違いはなんですか？

TypeScript：

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

@Component( {
    selector: 'my-comp',
    templateUrl: `
    input is {{foo}}
  `

})
export class myComponent {
    @Input() public foo: string;

    constructor() { }
    }

HTML：

ケース1

<my-comp [foo]="bar"></my-comp>

ケース2

<my-comp foo="bar"></my-comp>
angulardata-bindingproperty-binding
18
Martijn van den Bergh

このhtml属性を動的に追加する必要がある場合と、APIリクエストからjsonに来る例があります

ケース1[]プロパティバインディングとして知られています

<my-comp [foo]="data.bar"></my-comp>

ケース2{{ }}補間として知られています

<my-comp foo="{{data.bar}}"></my-comp>

ケース3条件付き処理

<my-comp [attr.foo]="data.bar ? true : false"></my-comp>

補間と呼ばれる{{}}とプロパティバインディングと呼ばれる[]はどちらも、angularは、データソースからビューターゲットへの一方向があることを理解していることを意味します。

詳細については www.codementor.io

4
mayur

一般に、固定文字列プロパティがある場合にのみ、角かっこなしのバインディングを使用する必要があると言えます。

docs から：

次のすべてが当てはまる場合は、角かっこを省略してください。

  1. ターゲットプロパティは文字列値を受け入れます。
  2. 文字列は、テンプレートにベイクできる固定値です。
  3. この初期値は変更されません。

標準のHTMLでは、この方法で属性を定期的に初期化します。これは、ディレクティブおよびコンポーネントプロパティの初期化でも同様に機能します。

要素のプロパティを文字列以外のデータ値に設定する場合は、プロパティバインディングを使用する必要があります。

全体として、右側の値は角かっこを使用した場合にのみ解釈されることを意味します。右側の引用符に引用符が表示されている場合は、角かっこを削除できます。[anyStringProperty]="'hello'"はanyStringProperty = "hello"に変更できます。

21
Nadine

すべての状況の簡単な説明は次のとおりです。

角括弧を使用する場合、右側は式です。ブラケットをまったく使用しない場合、右側は定数です。

したがって、my-tagの入力に「constant」文字列を割り当てます。角かっこで同じ効果を得るには、中の単一引用符に注意してください。そこに一重引用符を付けなかった場合、my-tagの入力は、その親コン​​ポーネント（このテンプレートを作成する場所）のプロパティまたは「constant」という名前のテンプレート変数（たとえば、ngForのlet-constantなど）に関連付けられます。

ここでフォーム プロパティバインディングと通常の属性の違いは何ですか

2
Masoud Bimar