В чем разница между круглыми скобками, скобками и звездочками в Angular2?

Я читал краткий справочник по Angular 1 на 2 на веб-сайте Angular , и одна вещь, которую я не совсем понял, - это разница между этими специальными символами. Например, тот, который использует звездочки:

<tr *ngFor="#movie of movies">
  <td>{{movie.title}}</td>
</tr>

Здесь я понимаю, что символ хеша (#) определяет movieкак локальную переменную шаблона, но что означает звездочка перед этим ngFor? И нужно ли это?

Далее приведены примеры, которые используют скобки:

<a [routerLink]="['Movies']">Movies</a>

Я немного понимаю, что квадратные скобки routerLinkсвязывают это с этим атрибутом HTML / Angular-директивой. Значит ли это, что они являются указателем на Angular для вычисления выражения? Вроде [id]="movieId"бы был эквивалент id="movie-{{movieId}}"в Angular 1?

Наконец, круглые скобки:

<button (click)="toggleImage($event)">

Используются ли они только для событий DOM, и можем ли мы использовать другие события, такие как (load)="someFn()" или (mouseenter)="someFn()"?

Я предполагаю, что реальный вопрос заключается в том, имеют ли эти символы особое значение в Angular 2, и какой самый простой способ узнать, когда использовать каждый из них ? Спасибо!!

Все подробности можно найти здесь: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- это сокращенная форма для структурных директив, где длинная форма может применяться только к <template>тегам. Краткая форма неявно оборачивает элемент, где она применяется в <template>.

• [prop]="value"предназначен для привязки объекта к свойствам ( @Input()углового компонента или директивы или свойства элемента DOM).
  Существуют специальные формы:

  • [class.className] привязывается к классу CSS, чтобы включить / отключить его
  • [style.stylePropertyName] привязывается к свойству стиля
  • [style.stylePropertyName.px] привязывается к свойству стиля с предустановленной единицей
  • [attr.attrName] привязывает значение к атрибуту (отображается в DOM, а свойства не отображаются)
  • [role.roleName] привязывается к атрибуту роли ARIA (пока недоступно)

• prop="{{value}}"привязывает значение к свойству. Значение является строковым (он же интерполяция)

• (event)="expr"привязывает обработчик события к @Output()событию или DOM

• #varили #varимеет разные функции в зависимости от контекста

  • В *ngFor="#x in y;#i=index"области видимости создаются переменные для итерации
    (в бета.17 это изменяется на * ngFor = "let x in y; let i = index" `)
  • На элемент DOM <div #mydiv>ссылка на элемент
  • На угловом компоненте ссылка на компонент
  • На элементе, который является угловым компонентом или имеет угловую директиву, где exportAs:"ngForm"он определен, #myVar="ngForm"создается ссылка на этот компонент или директиву.

[]- Свойство привязки в одну сторону от источника данных для просмотра цели. например

{{expression}}
[target]="expression"
bind-target="expression"

Мы можем использовать bind- вместо []

() -> Привязка событий одну сторону от цели просмотра к источнику данных

(target)="statement"
on-target="statement"

Мы можем использовать on- вместо ()

[()]- Двухстороннее связывание банана в коробке

[(target)]="expression"
bindon-target="expression"

Мы можем использовать bindon- вместо [()]

Как уже упоминалось, документация Angular, особенно «учебник по героям», объясняет это глубже. Вот ссылка, если вы хотите проверить это .

Круглые скобки - это события элемента, над которым вы работаете, например, нажатие кнопки, как в вашем примере; это также может быть mousedown, keyup, onselect или любое действие / событие для этого элемента, а после =указывается имя вызываемого метода - с использованием круглых скобок для вызова. Этот метод должен быть определен в вашем классе компонентов, а именно:

<element (event)="method()"></element>

Брекеты работает наоборот. Они должны получать данные из вашего класса - в противоположность круглым скобкам, которые отправляли событие - поэтому распространенным примером является использование такого стиля:

<element [ngStyle]="{display:someClassVariable}">

Видеть? Вы даете элементу стиль, основанный на вашей модели / классе.

Для этого вы могли бы использовать ...

<element style="display:{{ModelVariable}};">

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

<h1>{{Title}}</h1>

Что бы вы ни использовали, если вы будете последовательны, это поможет удобочитаемости вашего кода.

Наконец, для вашего *вопроса, это более длинное объяснение, но оно очень ОЧЕНЬ важно: оно абстрагирует реализацию некоторых методов, которую в противном случае вам пришлось бы сделать, чтобы заставить ngForработать.

Одним из важных обновлений является то, что ngForвы больше не будете использовать хэш; вам нужно использовать letвместо этого следующее:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

И последнее, на что стоит обратить внимание: все вышеперечисленное относится и к вашим компонентам, например, если вы создаете метод в своем компоненте, он будет вызываться с помощью ():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>