在 angular 中创建 Library Finder 应用程序：LibraryListComponent 和 LibraryDetailsComponent

到目前为止，我们只写了我们的逻辑——LibraryListComponent我们仍然需要更新 html 模板和css文件以使这个组件有用。在本教程中，我们将更新我们的剩余文件LibraryListComponent并创建LibraryDetailsComponent完整的文件。

创建LibraryListComponent模板

如果您阅读了前面的教程，您可能还记得我们将各个库的数据作为对象存储在单独的数组元素中。由于我们计划向用户显示所有这些结果，因此我们需要使用*ngForrepeater 指令遍历整个列表并将它们呈现在LibraryListComponent.

每个库都有自己的包含块，其中包含在标签div内呈现的库的名称。h4在每个图书馆的底部，都有一个链接，可将用户带到该图书馆的详细信息页面。所有这些元素都包裹在div一个固定宽度为 800 像素的容器中。

<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:</span> <span class="detail">{{library.version}}</span></p>
      <p><span class="title">Description:</span> <span class="detail">{{library.description}}</span></p>
      <a class="see-more" routerLink="/detail/{{library.name}}">See More Details</a>
    </div>
  </div>
</div>

这是我用来设置LibraryListComponent模板内元素样式的 CSS。我在每个库单元上添加了一个顶部边框，以便它们看起来彼此分开。您可以使用另一种技术将它们分开：

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是我们应用程序的最后一个组件。要快速生成所有必要的文件，请移至您的项目目录并从控制台运行以下命令。

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文件的完整代码：

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文件的代码：

<div class="container">
  <p>
    <span class="title">Name of the Library:</span> <span class="detail">{{name}}</span></p>
  <p>
    <span class="title">Latest Version:</span> <span class="detail">{{version}}</span></p>
  <p>
    <span class="title">Description:</span> <span class="detail">{{description}}</span></p>
  <p>
    <span class="title">Homepage:</span> <span class="detail"><a href="{{homepage}}">{{homepage}}</a></span></p>
  <p>
    <span class="title">Repository:</span> <span class="detail"><a href="{{repository}}">{{repository}}</a></span></p>
  <p>
    <span class="title">License:</span> <span class="detail">{{license}}</span></p>
  <button (click)="goBack()">Go Back</button>
</div>

就像其他组件一样，这次我也将所有元素包装在一个容器div中。

我们将span使用该类将所有元素的宽度设置title为 250 像素的固定宽度。这样，库的细节将正确对齐。这是需要进入library-details.component.css文件的 CSS：

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';
}

最后的想法

我们通过更新LibraryListComponent. 之后，我们继续LibraryDetailsComponent学习并学习如何向我们的用户显示有关特定图书馆的所有信息。完成本系列中的所有四个教程后，您现在应该拥有一个可以工作的库查找器应用程序。 

学习 Angular 最快的方法就是自己动手。牢记这一点，您应该尝试对此应用程序进行一些更改。例如，您可以限制 LibraryListComponent 只显示前 20 个左右的结果，或者根据库的名称对这些结果进行排序等。我们在第一个 Angular 应用程序系列中做了类似的事情。结合这两个系列的知识应该可以帮助您轻松地进行这些更改。