Angular 5 — создание нового компонента

Angular 5 — создание нового компонента

От автора: Сегодня мы рассмотрим, как создаются в Angular компоненты. Эта статья из серии – создание простого приложения на Angular 5.

Вторая часть — Angular 5 — первичная загрузка.

Прежде чем продолжить, внесем некоторые изменения в angular-cli.json.

Добавьте в apps.styles ссылку на styles.scss. Переименуйте файл styles.css в папке src в styles.scss. Мы будем использовать Sass препроцессор для стилей.

Измените defaults.styleExt на scss.

Удалите свойство prefix.

Перейдем к компоненту. pokemon-list – наш первый компонент, который мы создадим. Компонент просто получает данные с удаленного URL (super-crud-api в нашем случае) и показывает список. Создайте новый компонент с помощью ng generate

Разберем класс компонента PokemonListComponent. Код:

Помимо основных функций компонентов, которые мы обсудили в последней статье, этот класс реализует интерфейс OnInit библиотеки Core.

«У каждого компонента есть жизненный цикл создания, обновления и уничтожения. В Angular есть хуки для подключения к происходящим событиям во время жизни компонента. Хуки можно реализовать с помощью соответствующего интерфейса хуков жизненного цикла из библиотеки Angular.»

ngOnInit – один такой хук, объявленный в интерфейсе OnInit (см. ниже). Вызывается один раз в самом начале.

«Это эквивалент this.$onInit из компонентов angular1.x.» Во время выполнения OnInit мы будем получать данные о покемонах через запрос к API. При создании компонента через ng generate Angular CLI также импортировал его и добавил в массив declarations AppModule.

Теперь наш компонент должен выполнить запрос к API для получения данных с удаленного сервера, но компоненты не должны делать этого. Для этого есть services, а компонент может сосредоточиться на отображении данных и их передаче в другие компоненты при необходимости.

Создадим pokemon service, который будет получать данные из компонента pokemon-list. Создайте новый сервис pokemon –

команда сгенерирует новый класс PokemonService

И добавьте класс сервиса выше в модуль приложения providers. «Позже нам понадобится добавить этот сервис в компонент, поэтому его необходимо добавить в систему вставки зависимостей. Один из способов – добавить сервис в массив providers.»

Перед сервисами прописывается декоратор @Injectable. Более подробно разберем его чуть позже. Для связи с удаленным сервером Angular использует класс HttpClient.

Чтобы использовать HttpClient в нашем сервисе (и в любом месте в приложении), необходимо импортировать HttpClientModule в AppModule.

Теперь мы можем вставить HttpClient в конструктор pokemon service.

Определим метод getPokemon в сервисе, который будет делать http запрос к super-crud api, получать данные о покемонах и возвращать общий Observable.

В отличие сервиса $http в Angular 1.x, который возвращал promis, HttpClient возвращает Observable из rxjs.

Для получения данных ответа можно подписаться на observable, который можно считать эквивалентом promise. Конечно, работают они по-разному.

Вставьте PokemonService в конструктор PokemonListComponent и вызовите getPokemons на вставленном объекте во время выполнения OnInit

Мы подписались на возвращаемый observable и присвоили полученные данные в приватную переменную pokemonData. Переменная доступна для назначения в шаблоне компонента.

Переберите в цикле список покемонов и выведите их имена в шаблон компонента pokemon-list.component.html.

В примере выше мы использовали 2 директивы *ngIf и *ngFor.

*ngIf проверяет значение в переданной переменной, и если значение равно true, то создается DOM из шаблона. Эквивалент ng-if из Angular 1.x.

*ngFor – директива-повторитель, которая пробегает по списку элементов и оборачивает их во внутренний блок HTML для отображения в DOM. Эквивалент директивы ng-repeat в Angular 1.x.

Обновим корневой компонент, чтобы он показывал компонент pokemon-list.

Запустите в терминале ng serve и откройте //localhost:4200. Должен открыться список имен покемонов. Мы создали наш первый компонент, но он не динамический. Далее нам нужно кликнуть на все имена и посмотреть детали. Перейдем к созданию компонента pokemon-details.

Автор: Manish

Источник: //medium.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: