2023构建你的第一个Angular应用：存储和访问数据

在本系列的第一个教程中，我们学习了如何开始创建 Angular 应用程序。成功完成该教程后，您现在应该拥有第一个正常运行的 Angular 应用程序，其标题为“关于国家/地区的有趣事实”。在创建任何可以在屏幕上呈现的组件之前，我们将创建一些类并定义一些使这些组件有用的函数。

在本教程中，我们的重点将是创建一个 Country 类，该类将包含我们想要向用户显示其值的不同属性。然后，我们将创建另一个名为 country-data.ts 的文件。该文件将包含有关我们应用程序中所有国家/地区的信息。我们的第三个文件将被命名为 country.service.ts。这个名称可能听起来很花哨，但该文件将只包含 CountryService 类，该类具有检索和排序文件 country-data.ts 提供的信息所需的所有功能。

创建国家/地区类别

在 Angular 应用程序的 src/app 文件夹中，创建一个名为 country.ts 的文件。在其中添加以下代码。

export class Country {
    name: string;
    capital: string;
    area: number;
    population: number;
    currency: string;
    gdp: number;
}

上面的 TypeScript 代码定义了 Country 类，该类具有六个不同的属性来存储有关不同国家/地区的信息。国家名称、首都和货币存储为字符串。然而，其面积、人口和 GDP 都以数字形式存储。我们将在很多地方导入 Country 类，因此我在类定义之前添加了 export 关键字。

创建国家数组

下一步包括创建 country-data.ts 文件，以将所有国家/地区的信息存储为 Country 对象的数组。我们将在此文件中导入 Country 类，然后导出名为 COUNTRIES 的 const ，它存储国家/地区对象数组。

这是 country-data.ts 的代码。就像 country.ts 一样，您必须在 src/app 文件夹中创建此文件。

import { Country } from './country';

export const COUNTRIES: Country[] = [
  {
    name: 'Russia',
    capital: 'Moscow',
    area: 17098246,
    population: 144463451,
    currency: 'Russian Ruble',
    gdp: 1283162
  },
  {
    name: 'Canada',
    capital: 'Ottawa',
    area: 9984670,
    population: 35151728,
    currency: 'Canadian Dollar',
    gdp: 159760
  },
  {
    name: 'China',
    capital: 'Beijing',
    area: 9596961,
    population: 1403500365,
    currency: 'Renminbi (Yuan)',
    gdp: 11199145
  },
  {
    name: 'United States',
    capital: 'Washington, D.C.',
    area: 9525067,
    population: 325365189,
    currency: 'United States Dollar',
    gdp: 18569100
  },
  {
    name: 'Japan',
    capital: 'Tokyo',
    area: 377972,
    population: 12676200,
    currency: 'Yen',
    gdp: 4939384
  }
];

此文件中的第一行从位于同一目录的 country.ts 文件导入 Country 类。如果您从文件中删除这一行，TypeScript 将给出以下错误：

Cannot find name 'Country'.

如果没有 import 语句，TypeScript 将不知道 Country 类型的数组的含义。因此，请确保您已导入正确的类并正确指定 country.ts 的位置。

导入 Country 类后，我们继续创建 Country 对象的数组。我们将导入这个国家/地区数组以便在其他文件中使用，因此我们也向该数组添加 export 关键字。目前，数组中有五个不同的 Country 对象。这五个对象中的每一个都提供键值对，列出特定对象或国家/地区的属性名称及其值。

如果您尝试向尚未在 Country 类定义中声明的数组添加其他属性，您将收到以下错误：

Object literal may only specify known properties, and 'president' does not exist in type 'Country'

在本例中，我试图将总统的姓名存储为 string ，并将其存储在名为 president 的属性中。由于没有声明这样的属性，我们收到了错误。有时，您可能只想为特定对象指定属性，而不为其他对象指定属性。在这种情况下，您可以在类定义中将属性标记为可选。我在涵盖 TypeScript 接口的教程中更详细地讨论了它。

现在，只需确保所有属性的名称与类定义中的名称匹配即可。还要确保每个属性的值具有与类定义中声明的类型相同的类型。

创建 CountryService 类

创建 Country 类和 COUNTRIES 数组后，我们现在终于可以编写一些函数来处理国家/地区数据了。我们需要在服务文件中导入 Country 类和 COUNTRIES 数组。该文件需要导入 COUNTRIES 数组才能访问数据。同样，该文件必须导入 Country 类，以便理解 COUNTRIES 数组内的数据。

我们还将从 Angular 核心导入其他依赖项，例如 Injectable ，以使我们的 CountryService 类可用于注入器注入其他组件。

一旦您的应用程序规模增大，不同的模块将需要相互通信。假设 ModuleA 需要 ModuleB 才能正常工作。在这种情况下，我们将 ModuleB 称为 ModuleA 的依赖项。

大多数情况下，只需将我们需要的模块导入到另一个文件中即可。然而，有时我们需要决定是否应该从 ModuleB 创建一个由整个应用程序使用的类实例，或者是否应该在每次使用模块时创建一个新实例。在我们的例子中，我们将在整个应用程序中注入 CountryService 类的单个实例。

这是 country.service.ts 的代码：

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

import { Country } from './country';
import { COUNTRIES } from './country-data';

@Injectable()
export class CountryService {

  constructor() { }

  getCountries(): Country[] {
    return COUNTRIES;
  }

  getPopulatedCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.population - a.population).slice(0, 3);
  }

  getLargestCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.area - a.area).slice(0, 3);
  }

  getGDPCountries(): Country[] {
    return COUNTRIES.sort((a, b) => b.gdp - a.gdp).slice(0, 3);
  }

  getCountry(name: string): Country {
    return COUNTRIES.find(country => country.name === name);
  }
}

@injectable 装饰器用于标识可能需要注入依赖项的服务类。然而，将 @injectable 添加到服务类是必需的编码风格，所以我们无论如何都会这样做。

之后，我们为该类编写不同的方法，这些方法采用 COUNTRIES 数组，直接返回它或使用特定条件对其进行排序，然后返回数组的一部分。

getCountries() 方法预计会返回所有 Country 对象，因此它会返回整个 COUNTRIES 数组，而不进行任何操作对其进行修改。

getPopulatedCountries() 采用 COUNTRIES 数组，并根据不同国家/地区的人口按降序对其进行排序。然后，我们使用 Array.slice() 方法从数组中返回前三个国家（索引为 0、1 和 2）。 getLargestCountries() 和 getGDPCountries() 方法的工作方式类似。

getCountry() 方法采用名称作为参数，并返回 name 属性与提供的 name 参数具有相同值的国家/地区对象。

在 app.module.ts 中包含 CountryService

您创建的服务只是 Angular 中的一个类，直到您使用 Angular 依赖注入器注册它为止。 Angular 注入器将负责创建服务实例并将它们注入到需要该服务的不同类中。我们需要先向提供者注册一个服务，然后注入器才能创建该服务。

注册任何服务有两种常见方法：使用 @Component 提供商或使用 @NgModule 提供商。当您想要限制对特定组件及其所有嵌套组件的服务访问时，使用 @Component 提供程序是有意义的。当您希望多个组件能够访问该服务时，使用 @NgModule 提供程序是有意义的。

在我们的例子中，我们将使用 CountryService 与我们应用程序的多个组件。这意味着我们应该向 @NgModule 提供程序注册一次，而不是向每个组件的 @Component 提供程序单独注册。

目前，您的 app.module.ts 文件应如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

将导入语句添加到 app.module.ts 文件，并将服务添加到 @NgModule 提供程序数组。进行这些更改后，您的 app.module.ts 文件应如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

CountryService 类现在可供我们为应用程序创建的所有组件使用。

最终想法

成功创建三个文件，分别名为 country.ts、country-data.ts 和 country.service.ts 的第二个教程结束这个系列。

country.ts 文件用于创建一个 Country 类，该类具有不同的属性，如名称、货币、人口、面积等。 country-data.ts 文件用于存储国家对象数组，其中包含不同国家的信息。 country.service.ts 文件包含一个服务类，该服务类具有不同的方法来访问 COUNTRIES 数组中的国家/地区数据。将所有这些方法单独编写在服务类中，使我们能够从一个中心位置在不同的应用程序组件中访问它们。

在上一节中，我们向 @NgModule 提供程序注册了我们的服务，以使其可在不同组件内使用。

下一个教程将向您展示如何在应用中创建三个不同的组件来显示国家/地区详细信息和国家/地区列表。