使用Angular CLI生成组件

在这篇文章中，我看到了用Angular CLI生成的Angular应用程序的结构。
因此，我们将来看一下关于开发组件的内容，因为在Angular应用程序中创建组件很重要。

使用Angular CLI创建组件的基本模板。

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

生成组件的命令

$ ng generate component hoge-hoge
installing component
  create src/app/hoge-hoge/hoge-hoge.component.css
  create src/app/hoge-hoge/hoge-hoge.component.html
  create src/app/hoge-hoge/hoge-hoge.component.spec.ts
  create src/app/hoge-hoge/hoge-hoge.component.ts
  update src/app/app.module.ts

$ ng g component PiyoPiyo
installing component
  create src/app/piyo-piyo/piyo-piyo.component.css
  create src/app/piyo-piyo/piyo-piyo.component.html
  create src/app/piyo-piyo/piyo-piyo.component.spec.ts
  create src/app/piyo-piyo/piyo-piyo.component.ts
  update src/app/app.module.ts

$ ng g component fooBar
installing component
  create src/app/foo-bar/foo-bar.component.css
  create src/app/foo-bar/foo-bar.component.html
  create src/app/foo-bar/foo-bar.component.spec.ts
  create src/app/foo-bar/foo-bar.component.ts
  update src/app/app.module.ts

$ ng g component bar_bar
installing component
  create src/app/bar-bar/bar-bar.component.css
  create src/app/bar-bar/bar-bar.component.html
  create src/app/bar-bar/bar-bar.component.spec.ts
  create src/app/bar-bar/bar-bar.component.ts
  update src/app/app.module.ts

• ポイント

gengerate は g と省略することもできる
コンポーネント名はハイフン区切り、キャメルケース(Upper/Lower)、スネークケース のどれで指定しても良い
コンポーネントはハイフンで区切られたファイル名で生成される
コンポーネントは src/app/ 配下にファイル名と同名のディレクトリを生成した上でその下に配置される

*.css, *.html, *.spec.ts, *.ts の4ファイルが生成される(*.spec.ts はテストコード)
src/app/app.module.ts が更新されている

查看.ts文件

查看生成的组件时，它们如下所示。
在这里，我们只看了上面生成的四个组件中的一个，其他组件也是相同的。

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

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

  constructor() { }

  ngOnInit() {
  }

}

<p>
  hoge-hoge works!
</p>

• ポイント

OnInit が import されている
OnInit はライフサイクル(後述)をフックするインターフェース

@Component デコレータの selector には、文字列「app」+ ハイフン区切りでテンプレートのタグが定義されている
クラス名は Upper キャメルケース + 文字列「Component」が付与されて定義されている

查看 src/app/app.module.ts 的更新内容

当使用Angular CLI生成组件时，如前所述，src/app/app.module.ts将自动更新。
我们来看看它的内容。

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

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

// 生成した4つのコンポーネントが追加されている
import { HogeHogeComponent } from './hoge-hoge/hoge-hoge.component';
import { PiyoPiyoComponent } from './piyo-piyo/piyo-piyo.component';
import { FooBarComponent } from './foo-bar/foo-bar.component';
import { BarBarComponent } from './bar-bar/bar-bar.component';

@NgModule({
  declarations: [
    AppComponent,
    // 生成した4つのコンポーネントが追加されている
    HogeHogeComponent,
    PiyoPiyoComponent,
    FooBarComponent,
    BarBarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

四个生成的组件已经被添加到import语句中。此外，从NgModule的声明中可以看出，这些组件被声明为属于本模块的组件。

调用生成的组件

到目前为止，我们已经生成了组件并定义了生成的组件，还更新了src/app/app.module.ts文件。但是在目前的状态下，即使启动应用程序，生成的组件也不会在应用程序内部被调用。

生命周期这个概念

尽管话题有些混乱，但如前所述，*.ts文件中已经导入了名为OnInit的接口，并在类定义中实现了该接口，以及ngOnInit方法的具体实现。

组件有一个概念，称为生命周期，OnInit 是其中之一。

在本文中，我们将对 OnInit 进行简要说明，更详细的有关生命周期的内容将在另一篇文章中讨论。

初始化

以下是关于OnInit的简要说明的条目清单：

1. OnInit是一种用于初始化程序或对象的方法。
2. 在应用程序或对象的生命周期开始阶段调用OnInit。
3. 在OnInit中可以执行一些必要的设置或初始化操作。
4. 在此阶段，可以向应用程序或对象添加必要的组件或资源。
5. OnInit通常用来准备应用程序或对象进入正常工作状态。
6. 完成OnInit后，应用程序或对象可以进入其主要功能或逻辑。
7. 必要时，可以重写或自定义OnInit函数以满足特定需求。
8. 在应用程序或对象生命周期中的其他阶段也可以调用类似的初始化方法。

• ライフサイクルの一つで TypeScript のインターフェース

• コンポーネントの初期化処理を担当する

• ngOnInit というメソッドが宣言されていて、OnInit を implements したクラスは ngOnInit メソッドの実装を強制される

ngOnInit が実行されるタイミングはコンストラクタのあと

因此，理所当然地会产生一个问题：“在构造函数和 ngOnInit 中，哪个更适合进行初始化处理？”然而，在一般的 Angular 应用程序中，通常会选择在 ngOnInit 中进行初始化处理。其原因是因为涉及到其他生命周期，所以在这里暂不详述。

总结

因为篇幅较长，所以我们先以此为分隔点，总结一下本文。

• Angular CLI では ng generate component コンポーネント名 でコンポーネントを生成できる

• コンポーネントは

ハイフン区切りのファイル名で生成される
クラス定義は「Upper キャメルケース + Component」で定義される
テンプレートのタグは「app + ハイフン区切り」で定義される
src/app/app.module.ts は自動で更新され、生成したコンポーネントが追加される
ただしコンポーネントをアプリ上で呼び出すには src/app/app.component.html でタグを記載する必要がある

コンポーネントにはライフサイクルという概念があり、Angular CLI で生成したコンポーネントにはデフォルトで OnInit インターフェースの実装として ngOnInit メソッドを定義している
Angular アプリでは一般的に初期化処理を ngOnInit で実装する

接下来我想看一下生命周期。