Posted at

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

More than 1 year has passed since last update.


はじめに

この記事は BRIGHT VIE Advent Calendar 2017 8日目の記事になります。

前回、IonicPage採用時のHTMLタグ拡張(Custom Components)実装について (1/2)では、

IonicPageに準じた、新しいページの作成方法までを投稿しました。

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


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

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

$ ionic g

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

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

スクリーンショット 2017-12-07 23.33.38.png

basic-titleフォルダにはカスタムタグを構成する

・html:タグ情報

・scss:デザイン情報

・ts:ビジネスロジック

それぞれのファイルが生成されています。

ionic gコマンドで生成されたcomponentは自動的に

components.module.tsに、新規コンポーネントとして追加されていきます。(便利!)


components.module.ts

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

import { BasicTitleComponent } from './basic-title/basic-title';
@NgModule({
declarations: [BasicTitleComponent],
imports: [],
exports: [BasicTitleComponent]
})
export class ComponentsModule {}

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


basic-title.html

<!-- Generated template for the BasicTitleComponent component -->

<div>
{{text}}
</div>

このカスタムタグを使用するためのタグ名称は、

以下のselectorに指定されたbasic-titleとなります。


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';
}

}


これで

<basic-title></basic-title>

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


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

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


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

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


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

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


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

IonicPageに対応したページはモジュール分割の概念から、ベースとなるメインモジュールとは独立したモジュールとなるため、

各ページで個別にComponentsModuleをimportする必要があります。

Josh Moronyさんによる

Custom Components in Ionic 2

で紹介されているのは、まだIonicPageが導入される前の手法になりますので、

ComponentsModuleのimportを忘れないようにご注意を!

(ということに気づかず、最初はまりましたw)