482 views

コンポーネントを作成する

以下のコマンドを実行してコンポーネントを作成してみましょう。
コンポーネントの構成を図1に記します。

* 図1 コンポーネントの構成 *

コンポーネントは以下の3つのファイルで構成されます。

html
css
ts

htmlファイルはユーザからの入力を受け付けたり、結果を表示したりする、画面の内容を記述するファイルです。
cssファイルは、表示のデザインを定義するファイルです。
tsはtypescriptを記述するファイルで、htmlに入力された内容を受け取り、何等かの処理を行い、行った結果をhtmlファイルに返すプログラムを記述するためのファイルです。

これら3つのファイルはコマンドで自動生成することでコンポーネントのひな型が作成されます。
試しに、helloコンポーネントを作成してみましょう。
以下のコマンドを実行してください。

ng generate component hello

実行すると、次のような内容が表示されるはずです。

C:\Users\konishi\node\sample\sampleApp>ng generate component hello
CREATE src/app/hello/hello.component.html (20 bytes)
CREATE src/app/hello/hello.component.spec.ts (619 bytes)
CREATE src/app/hello/hello.component.ts (271 bytes)
CREATE src/app/hello/hello.component.css (0 bytes)
UPDATE src/app/app.module.ts (392 bytes)

合計で4つのファイルが作成されますが、使うのは以下の3つのファイルです。

src/app/hello/hello.component.html
src/app/hello/hello.component.css
src/app/hello/hello.component.ts

なお、作成しても、まだブラウザには何も表示されません。
ブラウザでアクセスしても、デフォルトのapp.component.htmlの内容が表示されるだけです。

作成したhelloComponentを表示するには、appComponent.htmlとapp.module.tsファイルを変更します。
appCompoent.htmlは、以下の画面を表示するためのHTMLが記載されています。

これは不要なので削除し、代わりに以下のコードに変更します。

<div class="content">
  <router-outlet></router-outlet>
</div>

ずいぶんシンプルになりました。
<router-outlet></router-outlet>とありますが、ここがこれから作成するコンポーネントの内容に置き換わります。
ここは細かく考えず、そういうおなじない、と思って大丈夫です。

次にapp.module.tsですが、以下の★の箇所を追記します。
★で追加している内容はルーティングの設定です。
ルーティングとは、指定されたURLの内容をどのコンポーネントに担当させるかを決めるものです。
7～9行目で、http://localhost:4200/helloにアクセスしたときに、どのコンポーネントを使用するかを定義しています。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';//★
import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';

const routes:Routes = [                                    //★
  {path:'hello', component:HelloComponent}  //★
];                                                                      //★

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) //★
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[その他解説]