Angular 2: Обязательно ли использовать скобки/квадратные скобки?

В выпуске Angular 2, опубликованном до сих пор, синтаксис разметки был изменен с префиксов ng- на квадратные скобки и квадратные скобки.

Если раньше у вас было бы:

<input ng-model="userName" />
<button ng-click="btnClick()">Run</button>

Новый синтаксис:

<input [value]="userName" />
<button (click)="btnClick()">Run</button>

Кто-нибудь знает, является ли этот синтаксис/обязательным и без альтернатив?

В настоящее время у нас есть приложение, в котором HTML генерируется через XSLT, а [ и ( не являются допустимыми атрибутами - таким образом, он не может генерировать синтаксис синтаксиса Angular 2.

Ответ 1

Не обязательно: -

http://eisenbergeffect.bluespire.com/all-about-angular-2-0/

Пожалуйста, ознакомьтесь с разделом директив (примерно в середине страницы): - "Директива о декораторах" по-прежнему существует, что означает в отношении вашего вопроса.

Конечно, будет откат.

Выполните также официальную демонстрацию, в которой также используется ng-model/click: -

https://www.youtube.com/watch?v=gNmWybAyBHI

Ответ 2

Фактически, [] и () являются допустимыми символами HTML в атрибутах. Если вы создаете HTML-код на стороне сервера или используете любой другой препроцессор, который не может обрабатывать эти символы, вы всегда можете использовать эквивалентный канонический синтаксис.

[] является сокращением для bind-*, следовательно [propertyName] == bind-property-name
() является сокращением для on-*, следовательно (eventName) == on-event-name

Этот синтаксис используется в основном по двум причинам (и фактически обязательным):

Escaping. Элементные атрибуты должны быть экранированы. Если у вас есть тег изображения с динамическим src следующим образом: <img src="{{imageSource}}">, это приведет к ошибке 404, так как браузер немедленно пытается запросить данный URL. URL в этот конкретный момент {{imageSource}}, который, несомненно, не имеет действительного URL. Поэтому мы имеем атрибут ngSrc в Angular 1. Мы можем использовать его как <img ng-src="{{imageSource}}">. Что он делает, он ждет, пока интерполяция будет оценена , а затем добавит атрибут src к изображению. Это гарантирует, что неправильный запрос не получен из-за асинхронной оценки интерполяции. Есть еще несколько директив, которые помогают в этом, например, ng-href. Теперь, когда дело доходит до веб-компонентов, имена атрибутов больше не детерминированы. Веб-компоненты могут определять свои собственные атрибуты, о которых инфраструктура не знает. Таким образом, у нас есть два варианта: мы либо создаем директиву для каждого атрибута, который требует экранирования (oh noes!), Либо мы получаем более общий синтаксис, который понимает Angular и позволяет соответствующим образом перехватывать инфраструктуру. Вот почему [propertyName] был введен. Опять же, это просто ярлык. Используйте канонический синтаксис, если это не относится к вам.
привязка свойств. Теперь вы можете задаться вопросом, почему [propertyName], а не [attributeName]. Оказывается, мы сталкиваемся с другой проблемой при работе с пользовательскими элементами, которые не знают о жизненном цикле Angular. В Angular мы можем решить, как значение привязано к области элементов. Таким образом, в этом коде: <my-directive foo="bar">, bar может быть либо просто строкой, либо объектом, который является двусторонней привязкой данных. Мы знаем только это, глядя на реализацию директивы. Однако веб-компоненты и пользовательские элементы просто не знают о Angular жизненном цикле. Это означает, что значение атрибута всегда является строкой, потому что это атрибут в HTML. Чтобы убедиться, что мы все еще можем передавать другие значения, а не только строки для любого элемента, Angular 2 связывается с свойствами элементов, а не с атрибутами. Поскольку свойство объекта DOM-элемента может быть чем угодно, а не просто строкой. Таким образом, с синтаксисом [] мы также сообщаем Angular, что мы хотим привязываться к свойству element, а не к атрибуту. Это также означает, что теперь потребитель директивы/элемента/веб-компонента отвечает за принятие решения о том, как передается значение.

Я написал статью об этом, которая охватывает эту тему, также есть беседа ngeurope..

Надеюсь, это прояснит ситуацию!