Question

在阅读有关模板表达/属性设置/插值的角度2指南之后，我有点困惑，这里让我感到困惑：

属性初始化DOM属性然后完成。属性   价值观可以改变;属性值可以＆＃t; t。

例如，当浏览器呈现时，   它创建一个相应的DOM节点，并初始化一个value属性   到＃＆＃34; Bob＆＃34;。

当用户输入＆＃34; Sally＆＃34;进入输入框，DOM元素值   财产成为＆＃34;莎莉＆＃34;。但HTML值属性仍然存在   我们发现如果我们问输入元素是不是没有改变   attribute：input.getAttribute（＆＃39; value＆＃39;）//返回＆＃34; Bob＆＃34;

HTML属性值指定初始值; DOM值   property是当前值。

禁用属性是另一个特例。一个按钮   默认情况下，disabled属性为false，因此启用了该按钮。什么时候   我们添加了disabled属性，它的存在单独初始化了   按钮的禁用属性为true，因此按钮被禁用。

添加和删除disabled属性会禁用并启用   按钮。属性的值是无关紧要的，这就是我们的原因   写静止无法启用按钮   禁用。

设置按钮的禁用属性（例如，使用Angular绑定）   禁用或启用按钮。财产的价值很重要。

HTML属性和DOM属性甚至不是一回事   当他们有相同的名字。这非常重要，我们会说   试。

模板绑定适用于属性和事件，而不是属性。

但是当我写一个简单的属性，使用属性字符串内的插值，它的工作，当我改变myValue组件变量时，更改反映在dom上

模板

<a href="{{myValue}}">tata</a>
<button (click)="change()">test</button>

组件

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

@Component({
    moduleId: module.id,
    selector: 'my-test',
    templateUrl: 'test.component.html'
})
export class TestComponent implements OnInit {

    myValue : number = 0;

    ngOnInit() { }

    public change() {
        this.myValue = (Math.random() * 10)
    }
}

Answer 1

在外行人的术语中，属性绑定和插值是两种不同的方式来传递＆＃34;组件实例变量对模板的值。

您可以互换地执行以下操作之一，并且Angular文档甚至说插值稍微有利于可读性：

<a href="{{myValue}}">tata</a>
<a [href]="myValue">tata</a>

你无法做到以下几点。因为这会更改属性属性href，但由于属性属性是在初始化期间进行的一次性更改，因此不会反映给用户：

<a [attr.href]="myValue">tata</a>

Answer 2

这是属性绑定，而不是属性绑定：

<a href="{{myValue}}">tata</a>

当更新href元素的<a>属性时，<a>元素本身会反映DOM属性的当前值。

正如@JohnV已经提到的，属性绑定将是

<a attr.href="{{myValue}}">tata</a>

或

<a [attr.href]="myValue">tata</a>

angular2插值和元素（属性vs属性）

2 个答案: