Angular, один из ведущих фреймворков для создания веб-приложений. Фреймворк стабильно развивается, чтобы соответствовать требованиям современной веб-разработки. С каждой новой версией он приносит новые функции, оптимизации и улучшения. Пользовательское сообщество с нетерпением ждет выпуска Angular 18, и вот какие нововведения мы можем ожидать от этой следующей версии.

Планируется, что Angular 18 будет выпущен в мае 2024 года, и уже есть несколько подтвержденных функций для включения в предстоящую версию, которые мы рассмотрим в данном материале.

Route Redirects с помощью Functions

Angular 18 вводит новую функцию для управления перенаправлениями. Теперь вместо использования строк мы можем использовать функции для указания URL перенаправления в свойстве redirectTo объекта Route. Это улучшение предлагает большую гибкость маршрутизации и открывает новые возможности.

В рамках функции фреймворк предоставляет доступ к объекту, содержащему информацию о URL.

До 18 версии:

export const routes: Routes = [
  {
    path: 'page1',
    redirectTo: '/page2',
    pathMatch: 'full'
  }
]; 

В 18 версии:

// redirectTo использование функции
export const routes: Routes = [
  {
    path: 'page1',
    redirectTo: (url) => { 
      return '/page2'; 
    },
    pathMatch: 'full'
  }
];

Функция должна возвращать строку или объект UrlTree. В Angular UrlTree представляет собой структуру данных, представляющую URL. Это по сути разобранный формат URL, который использует маршрутизатор Angular для навигации в приложении. UrlTree содержит информацию, такую как сегменты URL, параметры запроса и фрагменты. Он часто используется в системе маршрутизации Angular для задач, таких как манипуляция URL, навигация и защитники маршрутизации. Используя UrlTree, Angular обеспечивает последовательное и надежное поведение навигации в приложениях.

Объект "url" содержит всю информацию о маршруте, включая его данные, заголовок, параметры запроса, сегмент маршрутизации и другие данные.

New RedirectCommand

В Angular 18 появляется новый класс RedirectCommand, предназначенный для обработки NavigationExtras. Это дополнение позволяет расширить возможности перенаправления внутри Guards и Resolvers. Интеграция класса RedirectCommand значительно улучшает работу и гибкость, облегчая управление сложными шаблонами навигации в приложениях Angular.

const route: Route = {
  path: 'page1',
  component: PageComponent,
  canActivate: [
    () => {
      const router: Router = inject(Router);
      const urlTree: UrlTree = router.parseUrl('./page2');
      return new RedirectCommand(urlTree, { skipLocationChange: true });
    },
  ],
};

ng-content с контентом по умолчанию

Теперь есть возможность помещать контент по умолчанию в тег ng-content. Эта функция является логическим расширением элемента ng-content. Если для контента есть тег, то логично, что контент по умолчанию должен быть включен в сам тег.

Например, если у вас есть компонент с ng-content в его шаблоне, вы также можете включить контент по умолчанию, который будет отображаться, если для него не предоставлен контент.

<div>
   <h1>Заголовок</h1>
   <ng-content>Контент по умолчанию</ng-content>
</div>

Zoneless applications

В предыдущей версии Angular нам уже удалось поработать с сигналами (Signals). Одной из основных целей сигналов является возможность работы приложений без zone.js. Изначально это можно было бы достичь только с помощью работы с сигналами в компонентах. Однако ситуация изменилась. Теперь это будет возможно без использования сигналов в компонентах, начиная с Angular 18, который планирует выпуск в этом месяце.

Маттье Риглер и Энеа Джахоллари опубликовали статьи, сосредоточенные на этой теме.

Статья Матье исследует новую гибридную систему обнаружения изменений, где любое изменение сигнала, async pipe или любая другая операция, вызывающая markForCheck, теперь автоматически запускает обнаружение изменений, даже если операция выполняется вне zone.js (крайний случай).

Статья Энеа рассматривает процесс полного отключения zone.js и использование исключительно этих новых механизмов для управления изменениями состояния приложения.