插值和屬性綁定之間的區別

Question

我有一個定義imageUrl屬性的組件，在我的模板中，我使用此屬性設置圖像的 url。 我試過使用插值和使用屬性綁定，兩者都有效，但我找不到兩者之間的任何差異，或者何時使用一個而不是另一個。 有誰知道區別嗎？

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

Answer 1

Angular 計算雙花括號中的所有表達式，將表達式結果轉換為 strings ，並將它們與相鄰的文字字符串連接起來。 最后，它將這個復合插值結果分配給元素或指令/組件屬性。 -- 來自https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

屬性綁定不會將表達式結果轉換為字符串。

因此，如果您需要將字符串以外的內容綁定到指令/組件屬性，則必須使用屬性綁定。

Answer 2

插值使用 {{ 表達式 }} 將綁定值呈現給組件的模板。 插值是一種特殊的語法，Angular 將其轉換為屬性綁定

屬性綁定使用 [] 將值從組件發送到模板。 屬性綁定：要將元素屬性設置為非字符串數據值，必須使用屬性綁定

例子 ：

我們通過綁定到布爾屬性 isDisabled 來禁用按鈕。

<button [disabled]='isDisabled'>Try Me</button>

插值而不是屬性綁定，無論 isDisabled 類屬性值是真還是假，按鈕都將始終被禁用。

<button disabled='{{isDisabled}}'>Try Me</button>

規范形式，它是方括號的替代語法。

 <button bind-disabled='isDisabled'>Try Me</button>

Answer 3

Angular 中的插值只是屬性綁定的一種替代方法。 它是一種特殊類型的語法，可轉換為屬性綁定。

但是有一些場景我們需要使用插值而不是屬性綁定。 例如，如果要連接字符串，則需要使用角度插值而不是屬性綁定。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
    template: `<div>
                    <img src="https://angular.io/assets/images/logos/angular/{{imageName}}">            
               </div>`
})
export class AppComponent {
  imageName: string = "logo-nav2x.png";
}

Answer 4

字符串插值和屬性綁定

字符串插值是一種特殊的語法，它被 Angular 轉換為屬性綁定。 它是屬性綁定的便捷替代方案。

當您需要連接字符串時，您必須使用插值而不是屬性綁定。

@Component({  
        selector: 'my-app',  
        template: `<div>  
                        <h1>{{interposlationExample}}</h1>  
                    </div>`  
    })  
    export class AppComponent {  
        interposlationExample: string = 'Interpolation for string only';  
      
    }  

當您必須將元素屬性設置為非字符串數據值時，將使用屬性綁定。

例子：

在以下示例中，我們通過綁定到布爾屬性 isDisabled 來禁用按鈕。

  import { Component } from '@angular/core';  
    @Component({  
        selector: 'my-app',  
        template: `<div>  
        <button [disabled]='isDisabled'>Disable me</button>  
                         </div>`  
    })  
    export class AppComponent {  
    isDisabled: boolean = true;  
    }

如果您使用插值而不是屬性綁定，則無論isDisabled類屬性值是 true 還是 false，該按鈕將始終被禁用。

import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: `<div>  
    <button disabled='{{isDisabled}}'>Disable Me</button>  
                     </div>`  
})  
export class AppComponent {  
isDisabled: boolean = true/false;  
}

Answer 5

從安全的角度來看，Angular 數據綁定會在惡意內容顯示在瀏覽器上之前對其進行清理。 插值和屬性綁定都可以保護我們免受惡意內容的侵害。

在下面的示例中，我們使用插值。 注意標記的惡意使用。

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

@Component({
    selector: 'my-app',
    template: '<div>{{badHtml}}</div>'
})
export class AppComponent {
    badHtml: string = 'Hello <script>alert("Hacked");</script> World';
}

Angular 插值清理惡意內容並在瀏覽器中顯示以下內容

你好警報（“被黑客入侵”）； 世界

在下面的示例中，我們使用了屬性綁定。

'<div [innerHtml]="badHtml">'

屬性綁定對惡意內容的清理略有不同，我們得到以下 output，但要記住的重要一點是這兩種技術都可以保護我們免受惡意內容的侵害並無害地呈現內容。

你好警報（“被黑客入侵”）； 世界

參考： https://csharp-video-tutorials.blogspot.com/2017/06/property-binding-in-angular-2.html