ionic3自定义指令（自定义结构型指令和属性型指令）

ionic start demo tans创建项目后；
一、属性型指令：
1、命令行创建指令：ionic g directive change-color ;会生成一个directives的目录
2、directives/change-color/change-color.ts文件中：

import { Directive, Input, ElementRef, HostListener } from '@angular/core';


@Directive({
  selector: '[change-color]' // Attribute selector
})
export class ChangeColorDirective {
  color: string = 'red';   //默认颜色
  @Input('change-color')
  set ccc(color:string) {        //函数名称随意起
    this.el.nativeElement.style.color = color;
  };
  constructor(private el: ElementRef) {
    this.el.nativeElement.style.color = this.color;
  }
  @HostListener('click')   为指令增加一个点击事件
  onclick(){
    this.el.nativeElement.style.color = 'green';
  }
}

在app.module.ts中引入指令模块，并且填写在imports中:

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

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { Test1Page } from '../pages/test1/test1';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { ComponentsModule } from '../components/components.module'; //自定义组件
import { DirectivesModule } from '../directives/directives.module'; //自定义的指令

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Test1Page,
  ],
  imports: [
    DirectivesModule,  //自定义的指令
    ComponentsModule,
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    Test1Page,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

我们选择在about页面中测试此指令：
pages/about/about.html:

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

<ion-content padding>
  <div class="normal-page">
    <div change-color='blue'>自定义指令</div>
  </div>
</ion-content>

3、ionic serve后，发现字体颜色变了，点击后颜色也变化：

二、结构型指令：
1、命令行创建指令：ionic g directive change-dom; 做一个和*ngIf类型功能的指令
2、directives/change-dom/change-dom文件：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

/**
 * Generated class for the ChangeDomDirective directive.
 *
 * See https://angular.io/api/core/Directive for more info on Angular
 * Directives.
 */
@Directive({
  selector: '[change-dom]' // Attribute selector
})
export class ChangeDomDirective {
  @Input('change-dom') 
  set changeDom(bool: boolean){
    if(bool){
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }else{
      this.viewContainerRef.clear();
    }
  }

  constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) {
    console.log('Hello ChangeDomDirective Directive');
  }

}

修改about.html文件为：

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

<ion-content padding>
  <div class="normal-page">
    <div change-color='blue' *change-dom='true'>自定义指令</div>
  </div>
</ion-content>

结构型指令需要有’*’,否则会报错, *change-dom=‘true’
ionic serve,发现改为 *change-dom='false’时候页面不会渲染dom，成功!

码云代码链接: https://gitee.com/weijunw/ionic3Demo/tree/master/demo