创建您的第一个Angular应用程序：组件二

在本系列的第三篇教程中，您学习了如何创建countries信息应用的HomeComponent。我们将在本教程中创建另外两个组件。其中一个组件将列出我们存储在COUNTRIES数组中的所有***/地区。另一个组件将显示用户选择的任何***的详细信息。

创建 AllCountries 组件

HomeComponent我们在上一个教程中创建的 和我们AllCountriesComponent 将在本节中创建的非常相似。唯一的区别是，我们不是对COUNTRIES数组进行排序和切片，只得到前三个***，而是一次列出所有***。在控制台中，移动到您的项目目录并运行以下命令：

ng generate component all-countries

 这将在 angular 应用程序的src/app目录中创建一个名为all-countries的文件夹。该文件夹将包含三个不同的文件，分别名为、和。获取***列表和初始化组件本身等组件逻辑将放在文件中。该文件将存储组件的模板，该文件将存储不同的 css 规则来设置模板的样式。all-countries.component.tsall-countries.component.htmlall-countries.component.css.ts.html.css

这是该all-countries.component.ts文件的代码：

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

import { Country } from '../country';
import { CountryService } from '../country.service';

@Component({
    selector: 'app-all-countries',
    templateUrl: './all-countries.component.html',
    styleUrls: ['./all-countries.component.css']
})
export class AllCountriesComponent implements OnInit {
    countries: Country[];

    constructor(private countryService: CountryService) { }

    ngOnInit() {
        this.getCountries();
    }

    getCountries(): void {
        this.countries = this.countryService.getCountries();
    }
}

如您所见，代码非常基本。我们导入我们在本系列的第二个教程中Country创建的和CountryService类。组件装饰器用于指定我们将用来识别 .AllCountriesComponent

在类定义中，我们创建一个countries接受对象数组Country作为其值的属性。使用依赖注入将CountryService类添加到组件中。我们在初始化时调用getCountries()这个类的方法。该getCountries()方法本身依赖于 getCountries()类CountryService，该类返回一个对象数组Country。

该all-countries.component.html文件将存储我们组件的模板。

<div class="container">
  <h2>List of All the Countries in Our database</h2>
      <a *ngFor="let country of countries"
      class="country-unit" routerLink="/detail/{{country.name}}">
        <div class="country-block">
          <h4>{{country.name}}</h4>
          <p>Capital <br> ({{country.capital}})</p>
        </div>
      </a>
</div>

就像 的模板一样HomeComponent，我们*ngFor用于列出通过该getCountries()方法获取并存储在类的countries属性中的所有***/地区AllCountriesComponent。我们使用这个组件来显示使用该capital属性的不同***的首都。您将在下一个教程中了解routerLink 与标签一起使用的指令。a

使用的 CSS 与文件的 CSS 相同 home.component.css。唯一的区别是我们将每个***块的背景颜色更改为绿色。这是完整的 CSS 代码：

a {
  text-decoration: none;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

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: #4CAF50;
    border-radius: 2px;
}

.country-block:hover {
  background-color: #FF5722;
  cursor: pointer;
  color:white;
}

创建 CountryDetailComponent

这CountryDetailComponent将是我们 Angular 应用程序的第三个也是最后一个组件。每当用户单击HomeComponent或中列出的任何***/地区的名称时AllCountriesComponent，他们将被带到CountryDetailComponent.

返回控制台并运行以下命令：

ng generate component country-detail

这将在您的应用程序的src/app 目录中创建一个名为country-detail的文件夹。您应该在文件夹中看到四个不同的文件。其中三个文件将命名为：、和. 就像早期的组件一样，将包含我们组件的逻辑，并将包含用于渲染它的模板。country-detail.component.tscountry-detail.component.htmlcountry-detail.component.csscountry-detail.component.tscountry-detail.component.html

这是该 country-detail.component.ts文件的代码：

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

import { Country } from '../country';
import { CountryService } from '../country.service';

@Component({
    selector: 'app-country-detail',
    templateUrl: './country-detail.component.html',
    styleUrls: ['./country-detail.component.css']
})
export class CountryDetailComponent implements OnInit {
    country: Country;

    constructor(
        private route: ActivatedRoute,
        private countryService: CountryService,
        private location: Location
    ) { }

    ngOnInit(): void {
        this.getCountry();
    }

    getCountry(): void {
        const name: string = this.route.snapshot.paramMap.get('name');
        this.country = this.countryService.getCountry(name);
    }

    goBack(): void {
        this.location.back();
    }
}

这一次，我们还导入了ActivatedRoute 和 Location以及Component和OnInit。我们用于ActivatedRoute访问与在插座中加载的组件关联的路由的信息。我们Location用来使我们的应用程序能够与浏览器的 URL 进行交互。

在类定义中，我们创建了一个名为的属性country，它接受一个Country对象作为其值。与HomeComponentand不同AllCountriesComponent，该CountryDetailComponent课程一次只能显示一个***/地区的详细信息。

该getCountry()方法从路线快照中提取参数，并使用该值在数组name中查找具有给定名称的***/地区。COUNTRIES该方法在类中的方法goBack()的帮助下将用户带回上一页 。back()Location

这是该 country-detail.component.html文件的代码：

<div class="container">
  <div *ngIf="country">
    <h2>{{ country.name | uppercase }}</h2>
    <p>
      <span>Capital: </span>{{country.capital}}</p>
    <p>
      <span>Area: </span>{{country.area | number}} km
      <sup>2</sup>
    </p>
    <p>
      <span>Population: </span>{{country.population | number}}</p>
    <p>
      <span>GDP: </span>{{country.gdp | number}} USD</p>
    <p>
      <span>Currency: </span>{{country.currency}}</p>
    <button (click)="goBack()">Go Back</button>
  </div>
</div>

divwith中的模板代码仅在已设置为值时*ngIf="country"才会呈现。country我们使用Angular 管道将***名称大写，并正确格式化***的面积和人口。我们将Go Back按钮的点击事件绑定到我们组件的方法，这样每当用户点击一个按钮时，他们就会被带回上一页。goBack()

这是将进入country-detail.component.css文件的CSS：

.container {
  margin: 0 auto;
  width: 380px;
}

h2, p {
  font-family: 'Lato';
}

p {
  font-size: 1.25rem;
}

p span {
  color: #4CAF50;
  border-radius: 5px;
  width: 200px;
  display: inline-block;
}

label {
  display: inline-block;
  width: 3em;
  margin: .5em 0;
  color: #607D8B;
  font-weight: bold;
  font-family: 'Lato';
}

button {
  margin-top: 20px;
  font-family: Arial;
  background-color: #F44336;
  border: none;
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  color: white;
  font-family: 'Lato';
}

最后的想法

随着本教程的完成，我们在我们的第一个 Angular 应用程序中添加了另外两个组件。与AllCountriesComponent非常相似，HomeComponent因为它们都呈现了存储在COUNTRIES数组中的***列表。这是不同的，因为它根据名称 CountryDetailComponent从数组中提取有关单个***/地区的信息。COUNTRIES

创建三个不同的组件之后，您现在应该对 、 和 文件之间的交互有一个基本的了解， .ts以.html创建.css一个功能齐全的组件。

在本系列的下一个教程中，您将学习如何将所有这些组件一起使用并进行一些最终更改，以便应用程序可以正常运行而不会出现任何错误。