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