[ionic2] Angular 2のDirectiveを使う

Ionic2(Angular 2)でDirectiveを使う基本的な方法です。
下記の公式ドキュメントを参考にしています。
https://angular.io/docs/ts/latest/guide/attribute-directives.html
https://angular.io/docs/ts/latest/guide/structural-directives.html

サンプルとして、文字列をハイライトするDirectiveとpタグを作成するDirectiveを作成します。

1.tsファイルを作成する。

• Attribute directivesの場合

highlight-directive.ts

import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({
  selector: '[myHighlight]'
})
export class HighlightDirective {
  @Input('myHighlight') private highlightColor: string;

  /** 
   * Constructor
   **/
  constructor(private el: ElementRef, private renderer: Renderer) { }

  /** 
   * Init
   **/
  public ngOnInit() {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', this.highlightColor);
  }

}

• Structural directivesの場合

sample-tag-directive.ts

import { Component, ElementRef, Renderer } from '@angular/core';
@Component({
  selector: 'sample-tag',
  template: '<p>This is sample directive text.</p>'
})
export class SampleTagDirective  {

  /** 
   * Constructor
   **/
  constructor(private el: ElementRef, private renderer: Renderer) { }

}

2.使用するDirecviteをNgModuleで読み込む

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { HighlightDirective } from '../../directives/highlight-directive';
import { SampleTagDirective } from '../../directives/sample-tag-directive';

@NgModule({
  declarations: [
    MyApp,
     :
    HighlightDirective,
    SampleTagDirective
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
     :
  ],
  providers: []
})
export class AppModule {}

3.Direcviteを使用する

home-page.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p [myHighlight]="color">Highlight Area</p>
  <sample-tag></sample-tag>
</ion-content>

3.Direcviteにパラメーターを渡す

Direcviteに以下のように属性を追加すれば、パラメーターを渡せます。
※tapで色が変わります。

highlight-directive.ts

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({
  selector: '[myHighlight]'
})
export class HighlightDirective {
  private _defaultColor = 'red';
  @Input('myHighlight') private highlightColor: string;

  // 属性に関する処理を追加
  @Input() set defaultColor(colorName: string) {
    this._defaultColor = colorName || this._defaultColor;
  }

  // tap時の処理を追加
  @HostListener('tap') public onMouseEnter() {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', this._defaultColor || this.highlightColor);
  }

  /** 
   * Constructor
   **/
  constructor(private el: ElementRef, private renderer: Renderer) { }

  /** 
   * Init
   **/
  public ngOnInit() {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', this.highlightColor);
  }

}

home-page.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  <!-- 属性を追加 -->
  <p [myHighlight]="color" defaultColor="yellow">Highlight Area</p>
  <sample-tag></sample-tag>
</ion-content>