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

Ответ 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 имеют хорошее объяснение для всего этого:

• star - https://angular.io/docs/ts/latest/guide/template-syntax.html#!#structural-directives
• [] - https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax
• () - https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
• hash - https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars

Ответ 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>