Угловой 2: Разница между связыванием свойств с и без скобок?

Question

Я заметил, что можно связывать вещи без скобок. В чем разница?

Машинопись:

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

@Component( {
    selector: 'my-comp',
    templateUrl: `
    input is {{foo}}
  `

})
export class myComponent {
    @Input() public foo: string;

    constructor() { }
    }

HTML:

Случай 1

<my-comp [foo]="bar"></my-comp>

Дело 2

<my-comp foo="bar"></my-comp>

Answer 1

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

"Вы должны опустить квадратные скобки, когда выполняются все следующие условия: Свойство target принимает строковое значение. Строка - это фиксированное значение, которое вы можете вставить в шаблон. Это начальное значение никогда не изменяется. Вы обычно инициализируете атрибуты таким образом в стандарте. HTML, и он работает так же хорошо для инициализации директив и свойств компонентов. (...) Angular устанавливает его и забывает об этом." (...) При задании для свойства элемента нестрокового значения данных необходимо использовать привязку свойства "(источник: https://angular.io/guide/template-syntax).

В общем, это означает, что значение справа интерпретируется только при использовании скобок. Вы можете удалить квадратные скобки всякий раз, когда вы видите кавычки в кавычках справа: [anyStringProperty]="'hello'" можно изменить на anyStringProperty = "hello"

Answer 2

Есть некоторые случаи, когда нам нужно динамически добавлять подобные атрибуты html, и пример, который приходит из json из запроса API.

Случай 1 [] известный как связывание свойств

<my-comp [foo]="data.bar"></my-comp>

Дело 2 {{ }} известный как интерполяция

<my-comp foo="{{data.bar}}"></my-comp>

Случай 3 Условная обработка

<my-comp [attr.foo]="data.bar ? true : false"></my-comp>

И {{ }}, называемый Interpolation, и [], называемый Property Binding, означают, что angular понимают, что существует один путь от источника данных для просмотра цели.

Для получения дополнительной информации посетите www.codementor.io

Answer 3

Вот краткое описание всей ситуации:

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

Таким образом, будет назначать "постоянную" строку для ввода my-tag. Чтобы добиться того же эффекта в квадратных скобках: обратите внимание на одинарную кавычку внутри. Если вы не поместили туда одинарную кавычку, входные данные my-tag будут привязаны к свойству родительского компонента (где вы пишете этот шаблон) или переменной шаблона (как, например, let-constant для ngFor) с именем constant.

Форма здесь В чем разница между привязкой свойства и обычным атрибутом

Answer 4

Есть небольшая, может быть, неважная ситуация, но в некоторых случаях может раздражать то, что вы ее упускаете.

номер

---

Случай 1

<my-comp [foo]="90"></my-comp>

Случай 2

<my-comp foo="90"></my-comp>

Случай 1: typeof foo => 'number'

Случай 2: typeof foo => 'string'

Булево

---

Случай 3

<my-comp [foo]="true"></my-comp>

Случай 4

<my-comp foo="true"></my-comp>

Случай 3: typeof foo => 'boolean'

Случай 4: typeof foo => 'string'

Answer 5

Из Документов - помните о скобках:

Скобки [] указывают Angular вычислить выражение шаблона. Если вы опустите скобки, Angular рассматривает строку как константу и инициализирует целевое свойство этой строкой.