16.10.2024 06:00
jamak 0 4 Источник

Небольшие заметки о предстоящем выпуске Angular.

standalone: true - по умолчанию

Пожалуй самое важное изменение в Angular 19. Которое представили заранее в статье команда Angular.

Angular c v14 диктует нам что необходимо как можно часто использовать standalone компоненты.

Поэтому после миграции у вас появятся флаги standalone: false у обычных компонентов, которые привязаны к NgModule.

Так же добавят флаг strictStandalone (опционально) чтобы было еще больше мотивации писать standalone компоненты.

Это вовсе не означает что NgModule будет deprecate, но кто знает, возможно через 5 версии подумают и об этом.

Детали

effect - обновления использования

Основное - изменение порядка выполнения. Теперь эффекты будут запускаться чуть раньше и учавствовать в механизме change detection компонента согласно дереву изменений, а не отдельно в глобальной микротаске. Это добавит предсказуемости в поведении, сначала родители только потом дети.

Фича все еще находится в developer preview, и не факт что выйдет вместе с 19. Скорее всего нас ждет стабилизация в 19.1

Детали

@let в шаблонах

Стабилизация и выход из Developer Preview.

Переменные в шаблонах без использования директив на подобии *ngIf *ngxLet и кучу других в различных библиотеках.

@let user = user$ | async;

Детали

PendingTasks

Выход из Experimental

Способ сообщить Angular что выполняются еще таски. Фича необходима в SSR приложениях где будет отключен ZoneJs. Фича уже внедрена в HttpClient, понадобиться только когда есть прямое использование fetch, да и всяких асинхронных задач.

const taskService = inject(PendingTasks);
const taskCleanup = taskService.add();
await doSomeWorkThatNeedsToBeRendered();
taskCleanup();

Детали

input, output

Стабилизация и выход из Developer Preview.

Функции для того чтобы объявлять входящие и исходящие параметры компонента в виде Signal.

@Component({
  ...
})
export class UserProfileComponent {
  firstName = input<string>();             // Signal<string|undefined>
  lastName  = input.required<string>();    // Signal<string>
  age

Детали

@Directive({
  ...
})
export class MyDir {
  nameChange = output<string>();    // OutputEmitterRef<string>
  onClick    = output();            // OutputEmitterRef<void>
  
  updateName(newName: string): void {
	  this.nameChange.emit(newName);
  }
}

Детали

ROUTER_OUTLET_DATA

Добавляют input в RouterOutlet, который позволит передавать данные из родительского компонента в компоненты вывода. Значение доступно для инжекторов дочерних компонентов через токен ROUTER_OUTLET_DATA.

component.html

<router-outlet [routerOutletData]="{name: 'Angular'}" />

child-component.ts

data = inject(ROUTER_OUTLET_DATA) as Signal<{name: string}>;

Детали

takeUntilDestroyed

Стабилизация и выход из Developer Preview.

Функция для автоматической отписки при разрушении текущего компонента.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
export class Component implements OnInit{
  data;
 
  constructor(private service: DataService) {
    this.service.getData()
      .pipe(takeUntilDestroyed())
      .subscribe(response => this.data = response)
  }
}

Детали

Typescript

Breaking

Версия TypeScript ниже 5.5 больше не поддерживаются.

По умолчанию typescript 5.6

Детали

Это были основные изменения, дополнительно можно подсмотреть в CHANGELOG: https://github.com/angular/angular/blob/main/CHANGELOG.md

Выход Angular 19 ожидаем в октябре - ноябре 2024 года.

Комментарии (0)