在Angular中创建Library Finder应用程序：HomeComponent和LibraryListComponent

在我之前的一个 angular 教程系列中，我介绍了 Angular 的基础知识，从安装 CLI 开始，然后讨论如何创建基本组件和实现路由。查看我关于创建您的第一个 Angular 应用程序：基础知识的帖子，了解如何安装 Angular CLI 和其他推荐工具以轻松创建 Angular 应用程序。

Angular 创建您的第一个 Angular 应用程序：基础知识 Monty Shokeen

我们在该系列中创建的***信息应用程序非常适合 Angular 入门，但它缺少一些功能。例如，我们将想要向用户显示的信息存储在一个数组中。但是，在本教程中，我们将超越一小组数据，让用户搜索 CDNJS 提供的库数据库。

这是我们将要构建的应用程序：

在上一篇文章中，我们创建了一个类来使用 CDNJS apiLibraryService获取有关不同库的信息。我们还创建了一个app-routing.module.ts文件来为我们的应用程序提供所有路由逻辑。

在路由逻辑中，您可能已经注意到，我们告诉 AngularHomeComponent当用户在我们的应用程序的主页上时呈现。同样，我们告诉 Angular在用户 在输入字段中键入内容后LibraryListComponent单击“列出所有库”按钮时呈现。

在本教程中，我们将为我们的 Angular 应用程序创建这两个组件。我们将创建第HomeComponent一个，然后创建LibraryListComponent后者。

创建 HomeComponent 类

要HomeComponent使用 Angular CLI 创建文件，请移至library-finder控制台中的应用程序目录。之后，运行以下命令：

ng generate component home

home这将在我们的库查找器应用程序的根目录中创建一个名为的文件夹。该文件夹将有四个不同的文件。其中三个文件应命名为 home.component。css、home.component.html和home.component.ts。

HTML 文件将包含 的模板代码HomeComponent，CSS 文件将包含该模板的样式信息。typescript 文件将包含我们的HomeComponent.

这是home.component.ts文件的代码：

import { Component } from '@angular/core';

import { LibraryService } from '../library.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  searchTerm = '';
  libraryName = '';

  constructor(private libraryService: LibraryService) { }

  updateTerm(event: any): void {
    this.searchTerm = event.target.value;
  }

  updateName(event: any): void {
    this.libraryName = event.target.value;
  }

}

如果您阅读了创建您的第一个 Angular 应用程序系列，您可能已经注意到HomeComponent我们在该系列的第二个教程OnInit中创建的已经从 Angular 核心导入了模块。我们还在方法内初始化了该类中不同属性的值ngOnInit()。

这次没有导入这样的模块，因为HomeComponent在初始化期间没有获取或设置任何值。除此之外，大多数其他事情都是以类似的方式完成的。

我们首先导入LibraryService我们之前创建的类。之后，我们 在组件装饰器中设置selector、templateUrl和的值。styleUrls请记住，您可以提供多个样式表来设置组件的样式，但只能提供一个模板文件来呈现它。

在HomeComponent类定义中，我们定义了两个名为searchTerm和的属性libraryName。默认情况下，这两个属性的值都设置为空字符串。当用户在相应的输入字段中键入内容时，这些值会在updateTerm()和方法中更新。updateName()

创建 HomeComponent 模板

我们HomeComponent将有两个输入字段和两个链接，它们的作用类似于按钮并将用户带到不同的路径。输入字段将监听一个keyup事件并相应地更新 searchTerm和libraryName属性的值。

routerLink输入字段旁边的两个链接使用该指令将用户带到不同的路径。在第一种情况下，用户转到/list/{{searchTerm}}，在第二种情况下，他们转到/detail/{{libraryName}}。路径会根据输入字段的当前值动态更新。例如，当有人在第一个输入字段中/list/bootstrap键入bootstrap时，路径变为当有人在第二个输入字段中键入jquery时。/detail/jquery

这是我们的home.component.html文件的完整代码：

<div class="wrapper">
  <div class="input-container">
    <input type="text" placeholder="Search Term" (keyup)="updateTerm($event)">
    <a class="simple" routerLink="/list/{{searchTerm}}">List All Libraries</a>
  </div>
  <br>
  <div class="input-container">
    <input type="text" placeholder="Library Name" (keyup)="updateName($event)">
    <a class="simple" routerLink="/detail/{{libraryName}}">Show Library Details</a>
  </div>
  <br>
  <h3>Popular Libraries</h3>
  <div class="library-box" routerLink="/detail/jquery">jQuery</div>
  <div class="library-box" routerLink="/detail/chart.js">Chart.js</div>
  <div class="library-box" routerLink="/detail/sweetalert">SweetAlert</div>
</div>

我们还创建了三个不同的框来列出一些流行库的名称。用户将能够直接查看这些库的详细信息，而不是先输入他们的名称，然后单击“显示库”按钮。

所有这些元素都被包装在一个容器div元素中，以便将它们组合在一起以进行样式设置。

创建 HomeComponent CSS 文件

在编写了组件逻辑并创建了模板文件之后，我们只需要更新 CSS 文件以使我们的HomeComponent表现更美观。

这是我用来为模板文件中的不同元素设置样式的 CSS。您可以根据自己的喜好更改此处的所有样式规则。

div.wrapper {
  width: 800px;
  margin: 20px auto;
}

h3 {  font-size: 1.5em;
  text-align: center;
  color: #666;
  font-family: 'Lato';
}

a.simple {
  background: white;
  color: black;
  border: 1px solid black;
  padding: 5px 10px;
  font-size: 1.3rem;
  font-family: 'Lato';
  font-weight: 300;
  border-radius: 5px;
  text-decoration: none;
  width: 200px;
  display: inline-block;
  text-align: center;
}

input {
  border: none;
  border-bottom: 2px solid #00ccff;
  font-size: 1.5rem;
  outline: none;
  font-family: 'Lato';
  font-weight: 300;
  margin-right: 100px;
  width: 450px;
}

input:focus {
  border-bottom: 2px solid #ccff00;
}

div.library-box {
  font-family: 'Lato';
  color: white;
  background: purple;
  width: 200px;
  height: 70px;
  text-align: center;
  padding-top: 30px;
  font-size: 2em;
  border-radius: 4px;
  display: inline-block;
  margin: 20px;
}

div.library-box:hover {
  background: black;
  cursor: pointer;
}

CSS 文件中的所有内容都是不言自明的。我们将包装器的宽度设置为div固定的 800 像素值。当用户将鼠标悬停在带有流行库名称的底部框上时，它们的背景颜色会变为黑色。

创建 LibraryListComponent 类

正如我之前提到的，LibraryListComponent将用于列出包含从当前路径中提取的搜索词的所有库。您可以通过在命令行中执行以下语句来快速生成该组件所需的所有文件：

ng generate component library-list

就像我们的主组件一样，此命令将library-list在根目录中创建一个名为的文件夹。文件夹内将有四个文件，但我们只需要担心其中三个：library-list.component.css、library-list.component.html和library-list.component.ts。

一旦组件加载，我们将尝试获取与 URL 中提供的搜索词相关的库列表。这意味着我们还必须OnInit与Componentfrom一起导入@angular/core。

导入ActivatedRoute允许我们处理与当前加载的组件相关的所有路由信息。这样，我们可以轻松地从当前路径中提取搜索词。从 Angular 导入不同的依赖项后，我们继续导入我们的LibraryService类。

像往常一样，组件装饰器存储选择器的值、模板 URL 和样式表路径LibraryListComponent。

在ngOnInit()方法内部，我们调用getLibrary()方法。该getLibrary()方法进一步使用searchLibraries()方法 fromLibraryService来获得我们所有的结果。然后将这些结果存储在libraries我们类定义顶部声明的数组中。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { LibraryService } from '../library.service';

@Component({
  selector: 'app-library-list',
  templateUrl: './library-list.component.html',
  styleUrls: ['./library-list.component.css']
})

export class LibraryListComponent implements OnInit {

  libraries = [];

  constructor(
    private route: ActivatedRoute,
    private libraryService: LibraryService
  ) { }

  ngOnInit() {
    this.getLibrary();
  }


  getLibrary(): void {
    const library: string = this.route.snapshot.paramMap.get('search');
    this.libraryService.searchLibraries(library)
      .then((data: any) => {
        data.results.forEach(function (result) {
          this.libraries.push({ 'name': result.name, 'version': result.version, 'description': result.description });
        }, this);
      });
  }
}

最后的想法

在本教程中，我们成功创建HomeComponent了库查找器应用程序。这将允许用户在 CDNJS 数据库中搜索不同的库。HomeComponent本身并不是很有用。因此，我们将创建另外两个名为 LibraryListComponent和 的组件LibraryDetailsComponent。