Bindon: малоизвестные фишки шаблонов Angular / Habr

Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!

ngProjectAs

Проекция контента в Angular похожа на систему слотов Web Components. Вы можете написать просто <ng-content></ng-content> — и все, что вы поместите внутрь вашего компонента, будет спроецировано туда.

Вы также можете добавить несколько тэгов контента и проецировать отдельные части содержимого в разные места через атрибут select, как на примере ниже:

@Component({
  selector: 'layout',
  template: `
    <ng-content select="header"></ng-content>
    <main>
      <ng-content select="aside"></ng-content>
      <ng-content></ng-content>
    </main>
    <ng-content select="footer"></ng-content>
  `,
  styles: [
    `
      :host {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
 
      main {
        display: flex;
        flex: 1;
      }
    `
  ]
})
export class LayoutComponent {}

Такому компоненту можно передать содержимое следующим образом:

<layout>
  <header>Header</header>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
  I am content
</layout>

Но что, если вы хотите спроецировать текст, не оборачивая его DOM-элементом? Или, например, поместить блок из нескольких элементов в один слот? Тогда можно использовать тэг ng-container, пометив его атрибутом ngProjectAs. Вот пример:

https://stackblitz.com/edit/angular-content-selection

Совсем недавно на angular.io добавили отдельную статью о проецировании контента.

ngNonBindable

Допустим, вы хотите вывести на страницу пример интерполяции фигурными скобками, показав как есть: <div>Hello, {{userName}}</div>. Но, если вы хотите вывести непосредственно фигурные скобки, их нужно экранировать. Иначе Angular попытается их обработать. Добавьте одну { в шаблон. Вы увидите следующее сообщение:

Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.

Писать пять скобок вместо одной — это перебор. Возможно, вы подумали про изменение символа интерполяции для этого компонента, но это не поможет. Свой символ интерполяции только добавляет альтернативу, а не заменяет символ по умолчанию.

На помощь приходит ngNonBindable. Это директива компилятора (как i18n), которая говорит ему относиться к этому куску как к простому HTML: <div ngNonBindable>Hello, {{userName}}</div>

ngPreserveWhitespaces

Как вы, наверное, знаете, Angular избавляет вас от головной боли пустых кусков в разметке, удаляя их при компиляции. Эту штуку можно отключить в angularCompilerOptions в tsconfig.json для всего проекта или в декораторе @Component для конкретного компонента.

В целом это довольно полезная фишка, но иногда может быть необходимо отключить ее на небольшом куске шаблона. Еще одна директива компилятора может помочь с этим: просто поместите ngPreserveWhitespaces на элемент — и компилятор оставит все пробелы внутри в целости.

&ngsp;

В продолжение прошлого пункта: символ неразрывного пробела компилятор считает за пробел и удаляет. Если вы хотите его сохранить, есть специальный символ, хотите верьте, хотите нет, пришедший из Angular Dart — &ngsp;. Он переживет чистку компилятора и будет заменен на обычный  .

$any()

Вам когда-то попадались библиотеки с кривыми типами? Например, вы оперируете немутабельными данными и хотите передать в инпут компонента массив. Но автор библиотеки указал в качестве типа обычный массив. TypeScript выдаст вам ошибку, указав, что ваш ReadOnly-массив не имеет мутабельных методов и не может быть передан в компонент. Или бывает, что указанный интерфейс в принципе некорректный, если мейнтейнер библиотеки не фанат TypeScript. В таком случае есть два действия, которые нужно предпринять:

Обернуть ваш объект в специальную функцию $any: [value]="$any(value)".
Пойти в GitHub библиотеки и завести PR, исправляющий типы.

Не забудьте про второй пункт, без него ничего не сработает!

Bindon

У вас не рябит в глазах от обилия специальных символов?

<my-component
  #component
  [@animation]=”animation”
  [value]=”value”
  [(banana)]=”twoWayBoundValue”
  (output)=”onOutput($event)”
  (click)=”onClick()”
></my-component>

А ведь есть альтернативный синтаксис, с помощью которого тот же шаблон можно записать без всех этих скобок:

<my-component
  ref-component
  bind-animate-animation=”animation”
  bind-value=”value”
  bindon-banana=”twoWayBoundValue”
  on-output=”onOutput($event)”
  on-click=”onClick()”
></my-component>

Честно говоря, не знаю, зачем так делать. Может быть, чтобы было легко сортировать байндинги по типу? В любом случае теперь вы тоже так умеете.

Бонус

А вы знали, что, кроме ng-template, ng-container и ng-content, есть еще один встроенный тэг: ng-component. Это не совсем фишка шаблонов, но я впервые увидел его, изучая шаблон в DevTools, и меня эта находка удивила, так что я решил включить ее в статью.

Может быть, вы догадаетесь, отчего он появляется в HTML? Небольшая подсказка: селектор в @Component необязателен.

@Component({
   selector: 'app-root', // ←---- это поле опционально
   ...
})

Что же Angular может использовать для компонентов без селектора? Именно ng-component — автоматически созданный под них тэг. Но как компонент без селектора может оказаться в разметке? Его можно динамически создать с помощью *ngComponentOutlet или его может вставить Router.

Знаете ли вы еще какие-то особенные, плохо задокументированные возможности шаблонов, которые я не упомянул? Поделитесь ими в комментариях! А то я нигде не встречал полного списка и собрал все это из личного опыта и путешествий по исходникам.