25 июля вышел Angular 6.1. Данный минорный релиз фреймворка можно рассматривать как замену Angular 6.0, включающую в себя некоторые новшества и исправления ошибок. Этот материал, перевод заметки из блога Angular, посвящён основным новым возможностям Angular 6.1.
Теперь разработчики Angular-приложений могут воспользоваться новой возможностью маршрутизатора, которая позволяет запоминать и восстанавливать местоположение пользователя на странице — позицию прокрутки или скроллинга. При переходе на очередную страницу приложения позиция скроллинга сбрасывается, при этом запоминается положение пользователя на предыдущей странице. Нажатие на кнопку «Назад» приводит к открытию предыдущей страницы с учётом сохранённой позиции прокрутки.
Для того чтобы включить эту возможность, можно воспользоваться следующей командой:
Ожидается, что в будущем мажорном релизе платформы маршрутизатор по умолчанию будет настроен на восстановление позиции скроллинга.
Существует множество способов связывания CSS-правил с компонентами, в которых определены эти правила. Это называется View Encapsulation. Инкапсуляцию можно переключить на использование ShadowDOM v1 в декораторе компонента. Делается это так:
Теперь применение значения
ShadowDOM v1 отличается лучшей кросс-браузерной поддержкой, чем предыдущая версия стандарта. Работа над этим стандартом изначально велась с учётом возможности его использования в различных браузерах. О различиях Shadow DOM v0 и v1 можно почитать здесь.
Новшества ShadowDOM v1 будут интересны, в основном, авторам библиотеки и продвинутым разработчикам. Надо отметить, что применение Shadow DOM v1 необходимо для использования проецирования контента (content projection) в рамках технологии Angular Elements.
В этом релизе были улучшены возможности инструмента Schematics, в результате теперь из существующего правила можно возвращать новое правило. Это позволяет разработчикам более гибко определять набор правил для Schematics.
Теперь Angular, наряду с TypeScript 2.7, поддерживает TypeScript 2.8 и 2.9. Одна из важных возможностей TS 2.9, которая пригодится многим разработчикам, имеет отношение к ошибкам, к таким, как следующая:
В TS внесены изменения, благодаря которым, во-первых, подобные ошибки больше не появляются, а, во-вторых, больше не нужно переписывать код для того, чтобы привести его к состоянию, соответствующему подобным шаблонам экспорта.
В новом релизе Angular есть и другие изменения, например, касающиеся обработки неправильно сформированных URL (malformedUriErrorHandler) и направленные на улучшение работы с ассоциативными массивами и объектами (KeyValuePipe). Вышла и новая версия angular-cli.
Angular 6.1 является последним запланированным минорным релизом версии 6.x. Поэтому, в обозримом будущем, можно ожидать выхода бета-версий Angular 7.0 и появления в этом фреймворке новых интересных возможностей.
Уважаемые читатели! Какие новшества Angular 6.1 кажутся вам наиболее интересными? Чего вы ждёте от Angular 7.0?
Маршрутизатор и сохранение позиции прокрутки
Теперь разработчики Angular-приложений могут воспользоваться новой возможностью маршрутизатора, которая позволяет запоминать и восстанавливать местоположение пользователя на странице — позицию прокрутки или скроллинга. При переходе на очередную страницу приложения позиция скроллинга сбрасывается, при этом запоминается положение пользователя на предыдущей странице. Нажатие на кнопку «Назад» приводит к открытию предыдущей страницы с учётом сохранённой позиции прокрутки.
Для того чтобы включить эту возможность, можно воспользоваться следующей командой:
RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
Ожидается, что в будущем мажорном релизе платформы маршрутизатор по умолчанию будет настроен на восстановление позиции скроллинга.
ShadowDOM v1 и View Encapsulation
Существует множество способов связывания CSS-правил с компонентами, в которых определены эти правила. Это называется View Encapsulation. Инкапсуляцию можно переключить на использование ShadowDOM v1 в декораторе компонента. Делается это так:
@Component({
templateUrl: './my-component.html',
encapsulation: ViewEncapsulation.ShadowDom
})
export class MyComponent { }
Теперь применение значения
ViewEncapsulation.Native
, которое означает использование Shadow DOM v0, признано устаревшим.ShadowDOM v1 отличается лучшей кросс-браузерной поддержкой, чем предыдущая версия стандарта. Работа над этим стандартом изначально велась с учётом возможности его использования в различных браузерах. О различиях Shadow DOM v0 и v1 можно почитать здесь.
Новшества ShadowDOM v1 будут интересны, в основном, авторам библиотеки и продвинутым разработчикам. Надо отметить, что применение Shadow DOM v1 необходимо для использования проецирования контента (content projection) в рамках технологии Angular Elements.
Объединение правил Schematics в цепочки
В этом релизе были улучшены возможности инструмента Schematics, в результате теперь из существующего правила можно возвращать новое правило. Это позволяет разработчикам более гибко определять набор правил для Schematics.
Поддержка TypeScript 2.9
Теперь Angular, наряду с TypeScript 2.7, поддерживает TypeScript 2.8 и 2.9. Одна из важных возможностей TS 2.9, которая пригодится многим разработчикам, имеет отношение к ошибкам, к таким, как следующая:
Exported variable ‘x’ has or is using name ‘y’ from external module ‘z’ but cannot be named
В TS внесены изменения, благодаря которым, во-первых, подобные ошибки больше не появляются, а, во-вторых, больше не нужно переписывать код для того, чтобы привести его к состоянию, соответствующему подобным шаблонам экспорта.
Итоги
В новом релизе Angular есть и другие изменения, например, касающиеся обработки неправильно сформированных URL (malformedUriErrorHandler) и направленные на улучшение работы с ассоциативными массивами и объектами (KeyValuePipe). Вышла и новая версия angular-cli.
Angular 6.1 является последним запланированным минорным релизом версии 6.x. Поэтому, в обозримом будущем, можно ожидать выхода бета-версий Angular 7.0 и появления в этом фреймворке новых интересных возможностей.
Уважаемые читатели! Какие новшества Angular 6.1 кажутся вам наиболее интересными? Чего вы ждёте от Angular 7.0?