angular2 插值和元素（属性与属性）答案

【问题标题】：angular2 interpolation and element (attribute vs property)angular2 插值和元素（属性与属性）
【发布时间】：2017-02-05 07:08:08
【问题描述】：

在阅读了关于模板表达式/属性绑定/插值的 Angular 2 指南后，我有点困惑，这让我感到困惑：

属性初始化 DOM 属性，然后它们就完成了。财产价值观可以改变；属性值不能。

例如，当浏览器渲染时，它创建一个对应的 DOM 节点，并初始化了 value 属性给“鲍勃”。

当用户在输入框中输入“Sally”时，DOM元素值属性变为“Sally”。但是 HTML value 属性仍然存在如果我们询问输入元素，我们会发现不变 attribute: input.getAttribute('value') // 返回 "Bob"

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

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

添加和删除 disabled 属性会禁用和启用按钮。属性的值是无关紧要的，这就是为什么我们无法通过编写 Still 来启用按钮已禁用。

设置按钮的禁用属性（例如，使用 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)
    }
}

【问题讨论】：

标签： dom angular typescript

【解决方案1】：

通俗地说，属性绑定和插值是将组件实例变量的值“传递”到模板的两种不同方式。

您可以交替执行以下操作之一，Angular 文档甚至说插值稍微有利于可读性：

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

您无法执行以下操作。因为这会改变href的attribute属性，但是由于attribute属性是在初始化时一次性改变的，所以不会反映给用户：

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

【讨论】：

谢谢，还有一件小事； chrome调试工具显示属性还是dom属性？
如果您正在调试 JavaScript/TypeScript 并展开从 getElementById() 之类的方法创建的对象，chrome 将向您显示 DOM 属性。有趣的是，其中一个属性是attributes，它包含...您猜对了，该元素的属性的值。当您在“元素”选项卡中查看实际 DOM 时，它只会反映对属性的更改。

【解决方案2】：

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

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

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

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

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

或

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

【讨论】：