angular2 интерполяция и элемент (атрибут против собственности)

После прочтения углового 2 руководство о шаблоне выражения/свойств выжидать/интерполяции, я немного запутался, вот что запутать меня:angular2 интерполяция и элемент (атрибут против собственности)

Атрибуты инициализировать свойства DOM и то они сделаны. Свойство значения могут меняться; Значения атрибутов не могут.

Например, если браузер отображает , он создает соответствующий узел DOM со значением, инициализированным , на «Боб».

Когда пользователь вводит «Sally» в поле ввода, значение элемента DOM становится «Sally». Но атрибут HTML значения остается неизменным , как мы обнаружим, если мы задаем элемент ввода об этом атрибуте: input.getAttribute («значения») // возвращает «Боб»

Значение атрибута HTML определяет начальное значение; значение DOM - текущее значение.

Отключенный атрибут - еще один особый пример. Отключенное свойство кнопки по умолчанию ложно, поэтому кнопка включена. Когда мы добавляем отключенный атрибут, его присутствие только инициализирует отключенное свойство кнопки значением true, поэтому кнопка отключена.

Добавление и удаление отключенного атрибута отключает и включает кнопку . Значение атрибута не имеет значения, поэтому мы не можем включить кнопку, записав Still Отключено.

Установка свойства отключения кнопки (например, с помощью углового привязки) отключает или включает кнопку. Значение свойства имеет значение.

Атрибут HTML и свойство DOM - это не одно и то же, даже , когда они имеют одинаковое имя. Это так важно, мы снова скажем это .

Работа с шаблонами со свойствами и событиями, а не атрибутами.

но когда я написать простой атрибут, используя интерполяцию внутри атрибута строки, его работы, когда я изменить переменную myValue компонента, изменение отражается на РОМ

Шаблон

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

источник

2016-09-27 karim

В условиях неспециалиста привязка свойств и интерполяция - это два отдельных способа «передать» значение переменной экземпляра компонента в шаблон.

Вы можете выполнить одно из следующих действий взаимозаменяемы, и Угловая документация даже говорит, что интерполяция слегка выступает за читаемости:

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

Вы не могли бы сделать следующее. Так как это будет изменить свойство атрибута href, но поскольку свойство атрибутов являются изменения одноразовых, сделанных в ходе инициализации, оно не будет отражено пользователь:

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

источник

2016-09-27 15:46:01

спасибо, еще одна маленькая вещь; хром-инструмент отладки показывает свойство атрибута или dom? – karim

Если вы отлаживаете JavaScript/TypeScript и расширяете объект, созданный с помощью метода getElementById() ', chrome покажет вам свойства DOM. Интересно, что одним из этих свойств является «атрибуты», который содержит значения для ... вы догадались, атрибуты этого элемента. Когда вы посмотрите на acutal DOM на вкладке «elements», это отразится только на изменениях атрибутов. –

Это свойство связывания, а не атрибут связывания:

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

Когда href свойство <a> элемента обновляется, сам <a> элемент отражает текущее значение атрибута DOM.

Как @JohnV уже упоминалось, обязательный атрибут будет

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

или

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

источник

2016-09-27 15:52:04

angular2 интерполяция и элемент (атрибут против собственности)

ответ

Смежные вопросы