소개

이 기사는 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의 신규 작성을 실시하면(자), 다음과 같은 폴더나 파일이 생성됩니다.



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

에서 시작!
많은 양의 오류가 발생합니다. .



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에 추가하면 무사히 커스텀 태그 정보가 추가되었습니다!



IonicPage에 대응한 페이지는 모듈 분할의 개념으로부터, 베이스가 되는 메인 모듈과는 독립한 모듈이 되기 때문에,
각 페이지에서 개별적으로 ComponentsModule을 가져와야 합니다.

Josh Morony에 의해
Custom Components in Ionic 2
에서 소개되고 있는 것은, 아직 IonicPage가 도입되기 전의 수법이 되기 때문에,
ComponentsModule의 import를 잊지 않도록주의!

(그렇다는 것을 눈치 채지 않고, 처음은 멈췄습니다 w)