IonicPage採用時のHTMLタグ拡張(Custom Components)実装について (2/2)

#はじめに

この記事は [BRIGHT VIE Advent Calendar 2017](https://qiita.com/advent-calendar/2017/brightvie) 8日目の記事になります。

前回、[IonicPage採用時のHTMLタグ拡張(Custom Components)実装について (1/2)](https://qiita.com/felicidadept/items/3f1d4e0aa4719cdc9f2f)では、
IonicPageに準じた、新しいページの作成方法までを投稿しました。

後半では、HTMLタグ拡張（以下カスタムタグ）をIonic Pageへ導入する部分をみていきます。

#新しいカスタムタグを作成する

まずは新しいカスタムタグとなる「カスタムコンポーネント」を生成します。

```
$ ionic g
? What would you like to generate: component
? What should the name be? basic-title
```

componentの新規作成を行うと、以下のようなフォルダやファイルが生成されます。

<img width="359" alt="スクリーンショット 2017-12-07 23.33.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/34871/e575cb22-2a83-e9e1-6c67-2eb91d5bcd6e.png">


basic-titleフォルダにはカスタムタグを構成する
・html:タグ情報
・scss:デザイン情報
・ts:ビジネスロジック
それぞれのファイルが生成されています。


ionic gコマンドで生成されたcomponentは自動的に
`components.module.ts`に、新規コンポーネントとして追加されていきます。（便利！）

```js:components.module.ts
import { NgModule } from '@angular/core';
import { BasicTitleComponent } from './basic-title/basic-title';
@NgModule({
	declarations: [BasicTitleComponent],
	imports: [],
	exports: [BasicTitleComponent]
})
export class ComponentsModule {}
```

単純なタグではありますが、以下のようなカスタムタグが生成されました。

```html:basic-title.html
<!-- Generated template for the BasicTitleComponent component -->
<div>
  {{text}}
</div>
```

このカスタムタグを使用するためのタグ名称は、
以下のselectorに指定された`basic-title`となります。

```js:basic-title.ts
import { Component } from '@angular/core';

/**
 * Generated class for the BasicTitleComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'basic-title',
  templateUrl: 'basic-title.html'
})
export class BasicTitleComponent {

  text: string;

  constructor() {
    console.log('Hello BasicTitleComponent Component');
    this.text = 'Hello World';
  }

}
```

これで

```html
<basic-title></basic-title>
```

と記述できるカスタムタグの準備ができました。

#カスタムタグをHTMLに追加する

早速さきほどの生成済のHome.htmlに<basic-title>を使ってみます

```js:home.html
<ion-header>
  <ion-navbar>
    <ion-title>home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <basic-title></basic-title>
</ion-content>
```

タグを追加して、

```
ionic serve
```

で起動！
大量のエラーがでます。。

![スクリーンショット 2017-12-08 1.30.15.png](https://qiita-image-store.s3.amazonaws.com/0/34871/c0d961ed-45b9-6ee8-c44b-57e5899ac2cb.png)

homeページが<basic-title>タグを認識できないことを警告しています。

#IonicPage対応のHTMLで、カスタムタグを認識させる

カスタムタグを認識させるのは、home.module.tsのimportへ、components.module.tsへの参照を追加します。

```js:home.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(HomePage),
  ],
})
export class HomePageModule {}
```

上のようにimportsへ追加すると、無事、カスタムタグの情報が追加されました！

![localhost_8100_(iPhone 8) (1).png](https://qiita-image-store.s3.amazonaws.com/0/34871/04a77a76-e195-a04f-1a19-38f409f34827.png)

IonicPageに対応したページはモジュール分割の概念から、ベースとなるメインモジュールとは独立したモジュールとなるため、
各ページで個別にComponentsModuleをimportする必要があります。

Josh Moronyさんによる
[Custom Components in Ionic 2](https://www.joshmorony.com/custom-components-in-ionic-2/)
で紹介されているのは、まだIonicPageが導入される前の手法になりますので、
ComponentsModuleのimportを忘れないようにご注意を！

（ということに気づかず、最初はまりましたｗ）