[Angular] 使用 Angular CLI 生成服务

1 年 ago

新, 韵

2 minutes

首先，

由于在这篇文章中提到了如何创建组件，所以在本文中我们将来看一下使用Angular CLI创建服务的方法。

更新的消息

2021年1月4日

記事内で扱ったコードを Angular v11.0.5 で確認しました

工作环境

環境バージョン備考Angular CLI~~v1.6.3~~ v11.0.5$ ng --versionAngular~~v4.4.6~~ v11.0.5同上TypeScriptv4.0.2同上Node.js~~v9.2.1~~ v12.18.3$ node --versionnpm~~v5.6.0~~ v6.14.6$ npm --version

ng版本的结果$ ng版本

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | ‘_ \ / _` | | | | |/ _` | ‘__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 11.0.5
Node: 12.18.3
操作系统: darwin x64

Angular: 11.0.5
… 动画, 命令行界面, 公共模块, 编译器, 编译器CLI, 核心, 表单
… 浏览器平台, 动态浏览器平台, 路由器
Ivy Workspace: 是

包版本
———————————————————
@angular-devkit/architect 0.1100.5
@angular-devkit/build-angular 0.1100.5
@angular-devkit/core 11.0.5
@angular-devkit/schematics 11.0.5
@schematics/angular 11.0.5
@schematics/update 0.1100.5
rxjs 6.6.0
typescript 4.0.2

前提条件 tí

Angular CLI でプロジェクトを作成している

使用Angular CLI创建服务的模板

通过Angular CLI可以使用以下命令创建模板。

服务生成指令

$ ng generate service service/common
  create src/app/service/common.service.spec.ts (374 bytes)
  create src/app/service/common.service.ts (112 bytes)

除了生成组件之外，还可以将生成简写为g。其他要点包括

ディレクトリ/サービス名とすることでサービスを配置するディレクトリを生成した上でファイルが生成される

コンポーネントの場合は単純に ng g component コンポーネント名でディレクトリが生成されたが､サービスの場合はディレクトリを明示的に指定してやらなければいけない点に注意

サービスは app.module.tsに自動で登録されない

コンポーネントの場合は自動で登録されていたので､ここもコンポーネント-サービスとで異なる点として注意

可以提到以下项目。

查看.ts文件

当查看生成的服务时，可以看到如下内容。

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

@Injectable()
export class CommonService {

  constructor() { }

}

重点是

Injectable が import されていること

@Injectable でクラスが修飾されていること

通过这个声明，在两个方面上宣布可以实现 DI（依赖注入）的功能。

服务的使用

为了使用服务，需要在 app.module.ts 中将实例注册到提供者（providers）中以在整个应用程序中共享。

在进行 DI（依赖注入）时，先修改 CommonService，并准备好用于服务的属性。

改进服务

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

@Injectable()
export class CommonService {

  /**
   * 本サービスを DI したコンポーネントで参照されるプロパティ
   *
   * @type {String}
   * @memberof CommonService
   */
  public commonProp: String = '';

  /**
   * コンストラクタ. CommonService のインスタンスを生成する
   *
   * @memberof CommonService
   */
  constructor() {
    this.commonProp = 'このプロパティは CommonService のもの';
  }
}

尽管这只是一个简单的代码定义属性，但重点是

コンストラクタで初期化

成为这样。

注册服务

与您的中国驻境地相关的法规和政策必须遵守。

app.module.ts で import ～ providers に登録

需要执行｡接下来，我们来实际查看代码。

// 省略

// サービスを登録するための import
import { CommonService } from './service/common.service';

@NgModule({
  declarations: [
    // 省略
  ],
  imports: [
    // 省略
  ],
  // サービスを登録する
  providers: [
    CommonService
  ],
  // 省略
})
export class AppModule { }

这样就可以了

CommonService のインスタンスがアプリ全体で共有されるサービスとして登録された

只需在所需的组件中注入服务。

提供 DI 服务。

要进行依赖注入，需要在 app.module.ts 中注册服务。

使用したいコンポーネントで import してコンストラクタで引数にセット

可以通过以下方式实现。实际代码如下所示。

班级 jí)

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

// サービスを登録するための import
import { CommonService } from '../service/common.service';

@Component({
  selector: 'app-sample1',
  templateUrl: './sample1.component.html',
  styleUrls: ['./sample1.component.css']
})
export class Sample1Component implements OnInit {

  /**
   * CommonService のプロパティの参照を取得するプロパティ
   *
   * @type {String}
   * @memberof Sample1Component
   */
  public serviceProp: String = '';

  /**
   * コンストラクタ. ServiceSample1Component のインスタンスを生成する
   *
   * @param {CommonService} commonService 共通サービス
   * @memberof Sample1Component
   */
  constructor(private commonService: CommonService) { }

  /**
   * ライフサイクルメソッド｡コンポーネントの初期化で使用する
   *
   * @memberof Sample1Component
   */
  ngOnInit() {
    this.serviceProp = this.commonService.commonProp;
  }
}

重点在于以下三点。

import したサービスをコンストラクタの引数にセット
サービスで定義されたプロパティの値を取得するためのプロパティの定義
ngOnInit でサービスから値を取得

通过这个方法，可以在使用 DI 的组件中获取 CommonService 中定义并设置的属性值。

模板

以下是用于显示获取服务的值的模板。

<p>
  CommonService で設定されている値は｢ {{this.serviceProp}} ｣です｡
</p>

这是一个只对课堂定义的属性进行单向数据绑定的简单例子。

执行结果

只需一种选择，对以下内容进行中文本地化改写：

可以确认在橙色框中显示了CommonService设置的字符串。

总结

在使用服务之前，可以确认以下事项。

ng g service サービス名でサービスを生成できる
ディレクトリを指定する場合は ng g service ディレクトリ/サービス名とすればよい

このときディレクトリがなければディレクトリを生成した上でサービスが生成される

生成されたサービスは @Injectable で修飾されている

これによって DI( Dependency Injection ) が行えることを宣言している

サービスは( コンポーネントと異なり )生成しただけではアプリに登録されない
サービスは app.module.ts で登録することでアプリ全体でインスタンスを共有することになる
サービスの利用にあたっては､利用するコンポーネント側で import し､コンストラクタの引数にセットする必要がある

补充

在组件中进行服务的依赖注入。

此外，DI 服务不仅可以在 app.module.ts 中进行，还可以在任意组件中进行。实现方法如下所示。

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

// サービスを登録するための import
import { CommonService } from '../service/common.service';

@Component({
  selector: 'app-sample1',
  templateUrl: './sample1.component.html',
  styleUrls: ['./sample1.component.css'],
  providers: [
    // サービスを登録する
    CommonService
  ]
})
export class Sample1Component implements OnInit {

  /**
   * CommonService のプロパティの参照を取得するプロパティ
   *
   * @type {String}
   * @memberof Sample1Component
   */
  public serviceProp: String = '';

  /**
   * コンストラクタ. ServiceSample1Component のインスタンスを生成する
   *
   * @param {CommonService} commonService 共通サービス
   * @memberof Sample1Component
   */
  constructor(private commonService: CommonService) { }

  /**
   * ライフサイクルメソッド｡コンポーネントの初期化で使用する
   *
   * @memberof Sample1Component
   */
  ngOnInit() {
    this.serviceProp = this.commonService.commonProp;
  }
}

只需要提供一种选择，即用中文将以下句子释义。

app.module.ts でサービスの import と providers への登録は不要

在中文中，可以这样翻译：
如果在组件中依赖注入服务，

DI したコンポーネント､及びその子コンポーネントでのみ共有される

所以需要注意。

源代码

我已经将本次文章中用于验证代码的代码上传到这里，供参考…

首先 ，