Подтвердить что ты не робот

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

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

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

Я понимаю здесь, что символ hash (#) определяет 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, и что является самым простым способом узнать , когда использовать каждый? Спасибо!!

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

    • [class.className] связывается с классом, чтобы включить/отключить его
    • [style.styleName] привязывается к свойству style
    • [style.styleName.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; пусть я = index" `)
    • В элементе DOM <div #mydiv> ссылка на элемент
    • В компоненте Angular ссылка на компонент
    • В элементе, который является компонентом Angular или имеет директиву Angular, где exportAs:"ngForm" определен, #myVar="ngForm" создает ссылку на этот компонент или директиву.

Ответ 2

Да, они имеют особое значение. Самый простой способ - прочитать документы.

Angular2 docs имеют хорошее объяснение для всего этого:

Ответ 3

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

Скобки - это события того элемента, над которым вы работаете, например, щелчок по кнопке, подобной вашему примеру, это также может быть mousedown, keyup, onselect или любое действие/событие для этого элемента, а также то, что после '=' это имя метода для вызова - с помощью круглой скобки для вызова. этот метод должен быть определен для вашего класса компонента i.e

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