基于angular4写的一个指令,在ionic3.x项目在用。因为加载图片超时等原因导致图片显示不出来,需要替换成默认或者指定图片
1.err-src.ts
import { Directive,Input } from '@angular/core';
@ Directive({
selector: '[err-src]', // Attribute selector
host: {
'(error)': 'onError($event.target)'
}
})
export class ErrSrcDirective {
constructor() {}
private image = './assets/img/store_list/mo_icon_1.png';
@Input('err-src')
set backImg(img:string) {
if (img) this.image = img;
}
onError(e) {
e.src = this.image;
}
}
2.err-src.module.ts
import { NgModule } from '@angular/core';
import { ErrSrcDirective } from './err-src';
@NgModule({
declarations: [ErrSrcDirective],
imports: [],
exports: [ErrSrcDirective]
})
export class ErrSrcDirectiveModule {}
3.用法 :
注入指令
import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {MinePage} from './mine';
import {HttpClientModule} from '@angular/common/http';
import { ErrSrcDirectiveModule } from '../../directives/err-src/err-src.module';
@NgModule({
declarations: [
MinePage,
],
imports: [
IonicPageModule.forChild(MinePage),
HttpClientModule,
ErrSrcDirectiveModule,
],
})
export class MinePageModule {
}
html
指令后面可替换默认图片路径,不写的话默认图片在指令里面配置