Главное Свежее Вакансии   Проекты
Продвинуть свой проект
68 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Новые фичи Angular 6 за три минуты

Angular вышел с новыми функциями в версии 6.0.0, особенно в Angular-cli. Теперь, с помощью Angular 6, вы можете легко обновить свои старые пакеты, создать собственные веб-элементы, используя Angular Elements, и многое другое. Давайте посмотрим!

1*cpCQZxR1X5vqXDnEL4QBkQ.jpeg

ng add

0*xslBVN3hMPEAE1cI

ng add — новая команда в Angular-cli, которая помогает устанавливать и загружать новые пакеты в ваших Angular приложениях. Он работает так же, как и npm, но не заменяет его.

ng update

0*RdZ41Q-Ca2y06wnL

ng update еще одна новая команда Angular-cli. Она используется для обновления пакетов. Это полезно, например, когда вы хотите перейти с Angular 5 на Angular 6 или на любой другой пакет в Angular приложении.

Объявление провайдеров внутри сервиса

До этого обновления, приходилось объявлять массив провайдеров в app.module.ts

Теперь с помощью Angular 6 вы можете предоставить свою услугу внутри самого супервизора, поместив свойство providedIn:root в пределах “@injectable”.

Теперь с помощью Angular 6 вы можете предоставить ваш сервис внутри супервизора, поместив свойство providedIn:root в “@injectable”

0*VEwzE-liPMxQ5m3q

Используйте ng-template вместо template директив

Вы можете использовать ng-template для отрисовки HTML вместо тега template в новой версии Angular. ng-template — элемент Angular, который используется со структурной директивой, такой как *ngFor и *ngIf

0*2ny5ccA4w7bWXkuq

Элементы Angular

Angular 6 знакомит нас с элементами Angular. Вы можете отображать свои элементы Angular как собственные веб-элементы, и они интерпретируются как доверенные элементы HTML.

Вы можете добавить Angular элементы, выполнив следующую команду:

0*tHJlYvivXgDlZIF0

Импортируйте createCustomElement в свой компонент.

0*kpw_00dZZBAX1ub9

Затем создайте свой собственный элемент.

0*mrSX-04oWrWJO4iy

MyElemComponent.ts

0*4LDhyo65widBj0JH

Результат:

0*mGf55kmmTgzMF4Uj

Примечание. Вы должны реализовать метод DomSanitizer из @angular/platform-browser, чтобы использовать ваш пользовательский элемент.

Обновление до RxJS 6.0.0

Angular 6 использует последнюю версию библиотеки Rxjs. Теперь вы можете наслаждаться новейшими функциями RxJS 6 в своем Angular приложении :)

Angular сам по себе не имеет много новаторских изменений в Angular core, но Angular-cli действительно захватывает. Команда Angular больше ориентируется на производительность, легко создает PWA, обеспечивая хорошую среду для работы, чтобы работать с Angular в простой форме.

Адаптированный перевод статьи Angular 6 and its new features — explained in three minutes от Digital Skynet :)

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Популярные за неделю
Показать следующие
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать
Комментарии