插值表达式和属性绑定的区别

Question

我有一个组件，其中定义了一个imageUrl属性，在我的模板中，我使用这个属性来设置图像的URL。 我尝试使用插值和属性绑定来实现这一点，两种方法都有效，但我找不到它们之间的区别，或者何时使用其中一种。 有人知道区别吗？

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

- koninos

---

通过属性绑定，您可以将属性设置为属性的确切值，现在通过插值，您可以在字符串中混合来自模型的动态内容，因此称为插值（例如：src="http://{{url}}"）。 - user4615488

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - inoabrian

Answer 1

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

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

- Mark Rajcok

Answer 2

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

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

例如：

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

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

使用插值代替属性绑定后，按钮将始终被禁用，而不管isDisabled类属性的值是true还是false。

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

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

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

- Raja Rama Mohan Thavalam

Answer 3

在Angular中，插值是属性绑定的替代方法。它是一种特殊的语法，可以转换为属性绑定。

但是，在某些情况下，我们需要使用插值而不是属性绑定。例如，如果您想要连接字符串，则需要使用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";
}

- Ganesh Sadawarte

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

- Zubair Saif

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插值对恶意内容进行了清理并在浏览器中显示以下内容：

Hello alert("Hacked"); World

在下面的示例中，我们正在使用属性绑定。

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

属性绑定以稍微不同的方式净化恶意内容，我们得到以下输出，但需要牢记的重要一点是两种技术都保护我们免受恶意内容的侵害，并将内容无害地呈现。

Hello alert("Hacked"); World

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

- Vivek Nuna