基於angular7寫的一個指令,在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
<img src="{{baseInfo.photo || './assets/img/df-u-img.png'}}" err-src="./assets/img/df-u-img.png" alt="">
指令後面可替換默認圖片路徑,不寫的話默認圖片在指令裏面配置