В предыдущем уроке из нашей серии мы завершили создание нашего HomeComponent и начали работу с LibraryListComponent . В то время как HomeComponent позволяет пользователям вводить имя любой библиотеки и искать его, LibraryListComponent предоставляет список библиотек, которые соответствуют заданному поисковому запросу.
-
угловатыйСоздание приложения поиска библиотеки в Angular: HomeComponent и LibraryListComponent
Пока что мы написали только логику нашего LibraryListComponent все еще нужно обновить HTML-шаблон и CSS-файлы, чтобы сделать этот компонент полезным. В этом руководстве мы обновим оставшиеся файлы нашего LibraryListComponent а также создадим LibraryDetailsComponent полностью.
Создание шаблона LibraryListComponent
Если вы читали предыдущий учебник, вы можете помнить, что мы хранили данные отдельных библиотек в виде объектов в отдельных элементах массива. Поскольку мы планируем показать все эти результаты нашим пользователям, нам нужно использовать директиву повторителя *ngFor чтобы просмотреть весь список и отобразить их внутри LibraryListComponent .
Каждая библиотека будет иметь свой собственный блок div с именем библиотеки, отображаемой внутри тегов h4 . В нижней части каждой библиотеки есть ссылка, которая ведет пользователей на страницу сведений о данной библиотеке. Все эти элементы обернуты внутри контейнера div с фиксированной шириной 800 пикселей.
|
01
02
03
04
05
06
07
08
09
10
|
<div class=»container»>
<div *ngFor=»let library of libraries» class=»library-unit»>
<div class=»library-block»>
<h4>{{library.name}}</h4>
<p><span class=»title»>Version:
<p><span class=»title»>Description:
<a class=»see-more» routerLink=»/detail/{{library.name}}»>See More Details</a>
</div>
</div>
</div>
|
Вот CSS, который я использовал для стилизации элементов внутри шаблона LibraryListComponent . Я добавил верхнюю границу для каждого библиотечного блока, чтобы они выглядели отдельно друг от друга. Вы можете использовать другую технику, чтобы отделить их:
|
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
|
div.container {
width: 800px;
margin: 20px auto;
}
div.library-unit {
border-top: 1px solid #ccc;
padding-top: 20px;
}
h4 {
font-family: ‘Lato’;
font-size: 1.75em;
color: green;
margin: 0;
}
p {
font-family: ‘Lato’;
font-size: 1.2em;
color: black;
font-weight: 300;
margin: 10px 0;
}
p span.title {
color: blue;
width: 250px;
display: inline-block;
vertical-align: top;
}
p span.detail {
width: 500px;
display: inline-block;
font-size: 0.9em;
line-height: 1.7;
}
a.see-more {
text-decoration: none;
background: orange;
color: white;
padding: 5px 10px;
display: inline-block;
margin-bottom: 10px;
border-radius: 10px;
font-family: ‘Lato’;
}
|
Создание LibraryDetailsComponent
LibraryDetailsComponent является последним компонентом нашего приложения. Чтобы быстро сгенерировать все необходимые файлы, перейдите в каталог вашего проекта и выполните следующую команду из консоли.
|
1
|
ng generate component library-details
|
Это создаст папку с именем library-details в корневом каталоге вашего приложения с четырьмя файлами в нем. Нам нужно иметь дело только с тремя файлами с именами library-details.component.ts , library-details.component.html и library-details.component.css .
Давайте сначала приступим к редактированию файла library-details.component.ts . Он будет содержать всю логику нашего компонента. Как и LibraryListComponent , мы начинаем с импорта различных зависимостей.
Еще одна зависимость, которую мы будем импортировать, — это Location . Это позволяет нам взаимодействовать с URL браузера. Мы будем использовать его, чтобы наши читатели могли вернуться на предыдущую страницу, нажав кнопку «Назад» внутри нашего LibraryDetailsComponent . Если они прибыли сюда через LibraryListComponent , они будут возвращены в список библиотек. Если они прибыли сюда, нажав на любую из популярных библиотек HomeComponent , они будут возвращены HomeComponent .
Внутри определения класса LibraryDetailsComponent мы объявляем набор свойств для хранения информации, такой как последняя версия, описание, домашняя страница, лицензия и т. Д. Все они были инициализированы со значением «Загрузка …». Это значение будет обновлено, как только мы получим данные о конкретной библиотеке.
Мы вызываем метод getLibrary() нашего LibraryDetailsComponent после инициализации, чтобы соответствующие значения могли быть заполнены как можно быстрее. Вот полный код нашего файла library-details.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import { Component, OnInit } from ‘@angular/core’;
import { ActivatedRoute } from ‘@angular/router’;
import { Location } from ‘@angular/common’;
import { LibraryService } from ‘../library.service’;
@Component({
selector: ‘app-library-details’,
templateUrl: ‘./library-details.component.html’,
styleUrls: [‘./library-details.component.css’]
})
export class LibraryDetailsComponent implements OnInit {
name = ‘Loading…’;
version = ‘Loading…’;
description = ‘Loading…’;
homepage = ‘Loading…’;
repository = ‘Loading…’;
license = ‘Loading…’;
constructor(
private route: ActivatedRoute,
private libraryService: LibraryService,
private location: Location
) { }
ngOnInit() {
this.getLibrary();
}
getLibrary(): void {
const library: string = this.route.snapshot.paramMap.get(‘library’);
this.libraryService.showLibrary(library)
.then((res: any) => {
this.name = res.name;
this.version = res.version;
this.description = res.description;
this.homepage = res.homepage;
this.repository = res.repository.url;
this.license = res.license;
});
}
goBack(): void {
this.location.back();
}
}
|
Создание шаблона LibraryDetailsComponent и таблицы стилей
Мы уже сохранили всю информацию о библиотеке в разных переменных, поэтому теперь ее будет легко отображать пользователям. Я использовал дополнительные теги span в шаблоне, чтобы показать информацию пользователям. Это позволило мне легко выровнять эти значения. Вот код для файла library-details.component.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<div class=»container»>
<p>
<span class=»title»>Name of the Library:
<p>
<span class=»title»>Latest Version:
<p>
<span class=»title»>Description:
<p>
<span class=»title»>Homepage:
<p>
<span class=»title»>Repository:
<p>
<span class=»title»>License:
<button (click)=»goBack()»>Go Back</button>
</div>
|
Как и другие компоненты, на этот раз я обернул все элементы внутри контейнера div .
Мы установим ширину всех элементов span с классом title для фиксированной ширины 250 пикселей. Таким образом, детали библиотеки будут выровнены правильно. Вот CSS, который должен войти в наш файл library-details.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
|
div.container {
width: 800px;
margin: 20px auto;
}
p {
font-family: ‘Lato’;
font-size: 1.4em;
color: black;
}
p span.title {
color: blue;
width: 250px;
display: inline-block;
vertical-align: top;
}
p span.detail {
width: 500px;
display: inline-block;
font-size: 0.9em;
line-height: 1.7;
}
button {
margin-top: 20px;
font-family: ‘Lato’;
font-size: 1em;
background-color: #3A6;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
outline: none;
color: white;
font-family: ‘Lato’;
}
|
Последние мысли
Мы начали этот урок с обновления шаблона и CSS-файла нашего LibraryListComponent . После этого мы перешли к LibraryDetailsComponent и узнали, как отображать всю информацию о конкретной библиотеке для наших пользователей. После завершения всех четырех руководств в этой серии у вас должно появиться работающее приложение поиска библиотек.
Самый быстрый способ выучить Angular — это сделать что-то самостоятельно. Имея это в виду, вы должны попробовать внести некоторые изменения в это приложение. Например, вы можете ограничить LibraryListComponent показом только первых 20 или около того результатов или отсортировать результаты по названию библиотеки и т. Д. Мы сделали нечто подобное в нашей первой серии приложений Angular . Объединение знаний обеих этих серий должно помочь вам с легкостью внести эти изменения.
Я надеюсь, что эта серия улучшила ваше понимание Angular. Если есть что-то, что вы хотели бы, чтобы я разъяснил в этом уроке, дайте мне знать в комментариях.