Question

我有一个定义imageUrl属性的组件，在我的模板中我使用此属性来设置图像的url。我尝试使用插值和使用属性绑定，两者都工作，但我找不到两者之间的任何差异，或何时使用一个而不是另一个。有谁知道这个区别？

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

Answer 1

Angular评估双花括号中的所有表达式，将表达式结果转换为字符串，并将它们与相邻的文字字符串连接起来。最后，它将此复合插值结果分配给元素或指令/组件属性。 - 来自https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

属性绑定不会将表达式结果转换为字符串。

因此，如果需要将除字符串之外的内容绑定到指令/组件属性，则必须使用属性绑定。

Answer 2

插值使用{{expression}}将绑定值呈现给组件的模板。插值是Angular转换为属性绑定的特殊语法

属性绑定使用[]将组件中的值发送到模板。属性绑定：要将元素属性设置为非字符串数据值，必须使用属性绑定

示例：

我们通过绑定到布尔属性isDisabled来禁用按钮。

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

插值而不是属性绑定，无论isDisabled类的属性值是否为true，按钮都将被禁用。

<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 类属性值是真还是假，按钮都将始终处于禁用状态。

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;  
}

插值和属性绑定之间的区别

4 个答案: