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

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

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

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

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

ng generate component pokemon-list

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

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'pokemon-list', templateUrl: './pokemon-list.component.html', styleUrls: ['./pokemon-list.component.scss']
})
export class PokemonListComponent implements OnInit { constructor() { } ngOnInit() { } }

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

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

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

export interface OnInit { ngOnInit(): void;
}

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

...
import { PokemonListComponent } from './pokemon-list/pokemon-list.component';
...
@NgModule({ declarations: [ ... PokemonListComponent ... ]
})

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

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

ng generate service pokemon --module=app

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

import { Injectable } from '@angular/core'; @Injectable()
export class PokemonService { constructor() { } }

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

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

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

...
import { HttpClientModule } from '@angular/common/http';
... @NgModule({ ... imports: [ ... HttpClientModule ] ...
})
export class AppModule { }

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

...
import { HttpClient } from '@angular/common/http'; @Injectable()
export class PokemonService { constructor(private http: HttpClient) { } }

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

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable"; @Injectable()
export class PokemonService { private url = "https://super-crud.herokuapp.com/pokemon"; constructor(private http: HttpClient) {} getPokemons(): Observable<any> { return this.http.get<any>(this.url); }
}

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

import { Component, OnInit } from "@angular/core";
import { PokemonService } from "../pokemon.service"; @Component({ selector: "pokemon-list", templateUrl: "./pokemon-list.component.html", styleUrls: ["./pokemon-list.component.scss"]
})
export class PokemonListComponent implements OnInit { private pokemonData: any; constructor(private svc: PokemonService) {} ngOnInit() { this.svc.getPokemons().subscribe(data => { this.pokemonData = data; }); }
}

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

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

<div *ngIf="pokemonData"> <ul> <li *ngFor="let pokemon of pokemonData.pokemons"> <span>{{pokemon.name}}</span> </li> </ul>
</div>

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

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

<pokemon-list></pokemon-list> 

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

Автор: Manish

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

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