Во втором руководстве этой серии рассказывалось, как хранить данные в приложении Angular и получать к ним доступ с помощью класса обслуживания. В этом уроке мы создадим HomeComponent для нашего приложения Angular.
На домашней странице или в HomeComponent который мы создаем, будут перечислены первые три страны в разных категориях, таких как население и область. Данные для определения порядка сортировки будут взяты из массива COUNTRIES мы создали в предыдущем уроке.
Создание класса HomeComponent
Чтобы создать HomeComponent , измените каталог в консоли на папку вашего приложения и выполните следующую команду:
|
1
|
ng generate component home
|
Это создаст папку с именем home внутри папки src/app с четырьмя файлами внутри. Для этого приложения нам нужны только три файла с именами home.component.ts , home.component.css и home.component.html . Файл home.component.ts будет содержать всю логику для компонента, а файлы CSS и HTML будут управлять внешним видом и структурой компонента.
Начнем с редактирования файла home.component.ts . Предполагается, что HomeComponent покажет три верхних наиболее густонаселенных страны, три крупнейших страны и три страны с самым высоким ВВП, хранящихся в массиве COUNTRIES .
Мы будем импортировать как класс Country класс CountryService который мы создали в последнем уроке. Мы также импортируем Component и OnInit из @angular/core . Зависимость OnInit обеспечивает ловушку жизненного цикла, которая вызывается сразу после инициализации привязанных к данным свойств директивы.
После импорта всех необходимых зависимостей мы определим наш компонент-декоратор. Декоратор компонента используется для предоставления необходимой информации метаданных, связанной с нашим компонентом. Мы установим значение для selector , templateUrl и styleUrls внутри декоратора.
Селектор используется для указания тега, который будет использоваться для идентификации нашего компонента. templateUrl используется для предоставления URL для шаблона, который будет отображаться, когда Angular встречает предоставленный селектор. Свойство styleUrls используется для указания различных таблиц стилей, которые должны применяться к данному шаблону. Вот код внутри home.component.ts до этого момента:
|
01
02
03
04
05
06
07
08
09
10
|
import { Component, OnInit } from ‘@angular/core’;
import { Country } from ‘../country’;
import { CountryService } from ‘../country.service’;
@Component({
selector: ‘app-home’,
templateUrl: ‘./home.component.html’,
styleUrls: [ ‘./home.component.css’ ]
})
|
Теперь мы начнем определять класс HomeComponent с различными свойствами и методами, чтобы помочь нам показать данные о стране пользователям. Класс HomeComponent будет иметь три различных свойства, которые будут принимать массив стран в качестве значения. Мы можем внедрить зависимость в конструктор компонента, указав параметр конструктора с типом зависимости. Вот как мы CountryService класс CountryService в наш HomeComponent .
Вот остаток кода для файла home.component.ts :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
export class HomeComponent implements OnInit {
populatedCountries: Country[] = [];
largestCountries: Country[] = [];
gdpCountries: Country[] = [];
constructor(private countryService: CountryService) { }
ngOnInit() {
this.setPopulatedCountries();
this.setLargestCountries();
this.setGDPCountries();
}
setPopulatedCountries(): void {
this.populatedCountries = this.countryService.getPopulatedCountries();
}
setLargestCountries(): void {
this.largestCountries = this.countryService.getLargestCountries();
}
setGDPCountries(): void {
this.gdpCountries = this.countryService.getGDPCountries();
}
}
|
Мы создали три метода, которые используют класс CountryService чтобы получить страны с наибольшей площадью, наибольшим населением и самым высоким ВВП. Массивы, возвращаемые различными методами CountryService , затем присваиваются соответствующим свойствам класса HomeComponent .
Следует отметить, что все эти методы, которые устанавливают значение largestCountries , largestCountries и gdpCountries , вызываются внутри ngOnInit() чтобы их значения можно было использовать сразу после создания компонента.
Создание шаблона HomeComponent
После написания кода для класса HomeComponent , пришло время создать HTML-шаблон для компонента. Поскольку код внутри home.component.html в основном HTML, я буду объяснять только специфичные для Angular части. Вот код для всего файла:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<div class=»container»>
<h2>Three Most Populated Countries</h2>
<div class=»group»>
<a *ngFor=»let country of populatedCountries» class=»country-unit» routerLink=»/detail/{{country.name}}»>
<div class=»country-block»>
<h4>{{country.name}}</h4>
<p>{{country.population |
<p>People</p>
</div>
</a>
</div>
<br>
<h2>Three Largest Countries (Area)</h2>
<div class=»group»>
<a *ngFor=»let country of largestCountries» class=»country-unit» routerLink=»/detail/{{country.name}}»>
<div class=»country-block»>
<h4>{{country.name}}</h4>
<p>{{country.area |
<sup>2</sup>
</p>
</div>
</a>
</div>
<br>
<h2>Countries with Highest GDP</h2>
<div class=»group»>
<a *ngFor=»let country of gdpCountries» class=»country-unit» routerLink=»/detail/{{country.name}}»>
<div class=»country-block»>
<h4>{{country.name}}</h4>
<p>{{country.gdp |
</div>
</a>
</div>
</div>
|
Как я объяснял ранее, largestCountries , largestCountries и gdpCountries были назначены массивы объектов Country качестве значения. Мы используем директиву NgFor чтобы NgFor все страны в определенном массиве и показать их имена и соответствующие свойства. Например, *ngFor="let country of populatedCountries" по всем объектам страны в массиве *ngFor="let country of populatedCountries" и присваивает это значение локальной переменной country . Эта директива также отображает соответствующий тег, а также все остальные теги внутри него для каждого объекта страны в массиве populatedCountries. То же самое объяснение largestCountries ко всем блокам страны, отображаемым путем итерации по largestCountries и gdpCountries .
Мы используем угловые трубы для правильного форматирования значений населения, площади и ВВП для разных стран, чтобы сделать их более удобочитаемыми. Одна вещь, которая может вас routerLink — это директива routerLink которую я использовал со всеми тегами a . Мы обсудим это более подробно в последнем уроке этой серии, когда будем писать код для перемещения между различными компонентами или разделами приложения. Значение директивы routerLink действует как обычная ссылка, которую мы встречаем на посещаемых нами веб-сайтах. Важным отличием является то, что вместо загрузки страниц мы будем загружать компоненты.
Создание CSS-файла для HomeComponent
Наконец, вы можете написать немного CSS, чтобы сделать HTML-шаблон более презентабельным. Вот CSS, который я использовал для HomeComponent . Имейте в виду, что этот CSS должен home.component.css внутри файла home.component.css .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
body {
font-family: ‘Lato’;
}
h2, h3, h4, p {
font-family: ‘Lato’;
margin: 10px;
}
.country-block p {
margin-top: 0;
margin-bottom: 0;
}
.country-block h4 {
margin-bottom: 10px;
}
h4 {
position: relative;
font-size: 1.25rem;
}
.container {
margin: 0 50px;
text-align: center;
}
.country-unit {
width: 200px;
display: inline-block;
margin: 10px;
}
br {
clear: both;
}
.country-block {
padding: 30px 0;
text-align: center;
color: white;
height: 150px;
background-color: #795548;
border-radius: 2px;
}
.country-block:hover {
background-color: #9C27B0;
cursor: pointer;
color:white;
}
|
Важно, чтобы CSS внутри home.component.css применялся только к элементам внутри файла home.component.html .
Возможно, вы захотите отобразить HomeComponent внутри оболочки приложения, изменив содержимое файла app.component.html следующим образом:
|
1
2
|
<h1>{{title}}</h1>
<app-home></app-home>
|
К сожалению, вы получите следующую ошибку при попытке сделать это:
|
1
|
Can’t bind to ‘routerLink’ since it isn’t a known property of ‘a’.
|
Мы поговорим больше о директиве routerLink и о том, как избавиться от этой ошибки в пятом уроке этой серии. Прямо сейчас вы можете удалить все упоминания routerLink из файла home.component.html чтобы запустить приложение Angular без каких-либо ошибок. Просто убедитесь, что вы добавляете все обратно в файл.
Последние мысли
Если вы никогда раньше не создавали приложение Angular, освоение компонентов займет некоторое время. Для простоты понимания вы можете рассмотреть компоненты, похожие на различные фреймы, загруженные внутри веб-страницы. Файлы .ts содержат логику для компонента, так же как файлы .js содержат логику для iframes.
Файлы .html содержат элементы, которые вы хотите отобразить в iframe или внутри компонента, а файлы .css содержат различные правила стиля для этих элементов. Я допускаю, что это не очень точное сравнение, но оно должно помочь новичкам понять компоненты и отношения между различными файлами компонента.
В следующем уроке мы создадим еще два компонента, которые помогут вам лучше понять компоненты. Если у вас есть какие-либо вопросы о коде, связанном с HomeComponent , пожалуйста, дайте мне знать в комментариях.