Яка різниця між дужками, дужками та зірочками в 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}}"у кутовому 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 = "нехай x у y; нехай i = індекс" `)
  • На елементі DOM <div #mydiv>посилання на елемент
  • На кутовий компонент посилання на компонент
  • На елементі, який є кутовим компонентом або має кутову директиву, де exportAs:"ngForm"визначено, #myVar="ngForm"створюється посилання на цей компонент або директиву.

[]- Властивість прив'язки в одну сторону від джерела даних до перегляду цілі. напр

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

Ми можемо використовувати bind-, а не []

()-> Прив'язка події в одну сторону від цілі перегляду до джерела даних

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

Ми можемо використовувати замість ()

[()]- Двосторонній зв'язування банана в коробці

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

Ми можемо використовувати bindon- замість [()]

Як уже згадувалося, кутова документація, особливо "підручник для героїв", пояснює це глибше. Ось посилання, якщо ви хочете його перевірити .

Дужки - це події елемента, над яким ви працюєте, як натискання кнопки, як ваш приклад; це також може бути заміненим, клавішним, виділеним або будь-яким дією / подією для цього елемента, а те, що є після =- це ім'я методу для виклику - використання дужок для виклику. Цей метод слід визначити у вашому класі компонентів, тобто:

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