Если вы разработчик MEAN или Angular, вы должны использовать фразу «выпущена новая версия angular». Похожая ситуация произошла неделю назад (7 февраля 2020 г.), когда angular выпустил новую версию, то есть Angular 9.

Давайте выясним, что нового в v9

Плющ

Это новый механизм рендеринга внутреннего представления. это то, что придает волшебство вашему угловому приложению. Проще говоря, он собирает всю вашу логику внутри ваших компонентов, страниц, шаблонов и т. Д. И компилирует ее в инструкции, которые запускаются в браузере, когда вы отправляете готовое приложение angular. Это инструкция, которая обрабатывает DOM. он отображает DOM, обновляет его и т. д.

Тот факт, что у нас есть новый движок рендеринга, хотя он находится «под капотом», меняется. Это означает, что синтаксис, API, то, как мы используем компоненты, модули и т. Д., Останутся прежними. Поэтому все, что вы узнали о предыдущей версии angular, остается в силе для этой версии.

Основное назначение плюща - уменьшить размер пучка. Команда angular работает над ivy, чтобы сделать приложения angular меньше, чтобы пользователям приходилось загружать меньшее количество кода. Когда веб-рендеринг будет загружен, будут загружены только начальные пакеты, а оставшиеся пакеты будут загружены позже. это знаменует собой значительное улучшение отображения веб-сайтов

Магия здесь в том, что мы можем получить меньшие пакеты кода, который мы написали ранее, и нам не нужно делать ничего особенного. Благодаря этому новому движку рендеринга.

Проверка типа шаблона

Это помогает разработчикам гарантировать или проверять тип переменных в шаблоне или путем передачи значения другому компоненту через шаблон. Базовый и полный режим уже был в предыдущей версии, но «строгий режим» - новинка. Давайте обсудим их все.

1) Базовый режим:

В самом базовом режиме проверки типов, когда для флага fullTemplateTypeCheck установлено значение false (в файле tsconig.json), Angular проверяет только выражения верхнего уровня в шаблоне.

Если вы напишете <map [city]="user.address.city">, компилятор проверит следующее:

  • user - это свойство класса компонента.
  • user - это объект со свойством адреса.
  • user.address - объект в собственности города.

Компилятор не проверяет, можно ли присвоить значение user.address.city входу city компонента <map>.

2) Полный режим:

Если для флага fullTemplateTypeCheck установлено значение true, Angular более агрессивно проверяет типы в шаблонах. Особенно:

  • Проверяются встроенные представления (например, внутри *ngIf или *ngFor).
  • Трубы имеют правильный тип возврата.
  • Локальные ссылки на директивы и каналы имеют правильный тип (за исключением общих параметров, которыми будет any).

3) Строгий режим:

Строгий режим - это надмножество полного режима, доступ к которому осуществляется установкой флага strictTemplates в значение true. Этот флаг заменяет флаг thefullTemplateTypeCheck.

›› Сравнение полного и строгого режимов

  • Проверяет, что привязки компонентов / директив могут быть присвоены их @Input().
  • При проверке вышеизложенного подчиняется флагу TypeScript strictNullChecks.
  • Выводит правильный тип компонентов / директив, включая дженерики.
  • Выводит типы контекста шаблона, если они настроены (например, допускает правильную проверку типа NgFor).
  • Выводит правильный тип $event в привязках событий компонента / директивы, модели DOM и анимации.
  • Выводит правильный тип локальных ссылок на элементы DOM на основе имени тега (например, типа, который document.createElement вернет для этого тега).

Давайте попробуем это
Здесь я создал app.component.ts и у него есть свойство user

и другой компонент, то есть user.component.ts

и наши app.component.html выглядят так

здесь user.age перенаправляет на другой компонент в качестве входных данных.

ЕСЛИ ВЫ ЗАМЕТИЛИ! мы передали user.age (номер типа) на вход пользовательского компонента name (строка типа) и не получили никакой ошибки!

ДАВАЙТЕ НЕМНОГО ВОЛШЕБСТВА ЗДЕСЬ.

перейдите к файлу tsconfig.json и добавьте strictTemplates : true в angularCompilerOptions.

и перезапустите приложение (ng serve), и оно покажет ошибку

Вот как строгий режим помогает нам предотвращать ошибки во время выполнения.

@viewChild:

В версии angular 8, когда нам нужно использовать @viewChild для получения любого компонента из шаблона, мы должны передать дополнительное значение, то есть static.

например:
@ViewChild(‘slides’, { static: false }) slides: IonSlides;

но в Angular 9 нам не нужно пропускать stactic : false, он установлен по умолчанию. Нам нужно только указать static:true, если нам нужно его использовать, так же, как мы использовали его в angular 7 и более старых версиях

так что синтаксис снова будет:
@ViewChild(‘slides’) slides: IonSlides;

Устаревшие:

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

Заключение:

Итак, подытоживая, можно сказать, что в новой версии angular, ivy (новый движок рендеринга) является главным, на что нужно обратить внимание, это существенно повлияет на производительность angular, проверка типа нового шаблона строгий режим, синтаксис @viewChild изменен на v7 и более ранние версии, и нет серьезных критических изменений и устаревших рекомендаций.

Удачного кодирования! (^ _ ^) /