javascript - 插值和属性绑定的区别

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

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

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

例子 ：

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

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

插值而不是属性绑定，无论 isDisabled 类属性值是 true 还是 false，按钮都将始终被禁用。

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

规范形式，它是方括号的替代语法。

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

Answer 3

字符串插值和属性绑定

字符串插值是一种特殊的语法，它被 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 4

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