您好,登錄后才能下訂單哦!
這篇文章主要介紹如何實(shí)現(xiàn)一個(gè)angular版本的Message組件,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
學(xué)習(xí)一個(gè)框架或庫的最好方法是看官方文檔,并著手去寫例子。最近在利用空閑的時(shí)間學(xué)習(xí)angular,那今天就嘗試寫一個(gè)message組件,并通過message服務(wù)動(dòng)態(tài)加載message組件。
我所參與的項(xiàng)目基本是用jquery完成的。之前,在項(xiàng)目中自己動(dòng)手寫過一個(gè)簡單的message插件,樣子如下圖。
那現(xiàn)在就使用angular(版本5.0.0)來實(shí)現(xiàn)message組件。
message組件
message組件要根據(jù)傳入的類型、消息和duration來顯示。創(chuàng)建三個(gè)文件:message.component.ts,message.component.html,message.component.css,代碼如下。
//message.component.ts import {Component,Input,OnInit,ChangeDetectionStrategy} from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; const mapping={ success:'glyphicon-ok-sign', warning:'glyphicon-exclamation-sign', error:'glyphicon-exclamation-sign', info:'glyphicon-ok-circle' } @Component({ selector:'upc-ng-message', templateUrl:'./message.component.html', styleUrls:['./message.component.css'], changeDetection:ChangeDetectionStrategy.OnPush }) export class MessageComponent implements OnInit{ ngOnInit(): void { this.typeClass=['upc-message-' + this.msgType]; this.typeIconClass=[mapping[this.msgType]]; } @Input() msgType:'success' | 'info' | 'warning' | 'error'='info' @Input() payload:string = '' private typeClass private typeIconClass }
<!--*message.component.html--> <div class="upc-message"> <div class="upc-message-content" [ngClass]="typeClass"> <i class="glyphicon" [ngClass]="typeIconClass"></i> {{payload}} </div> </div>
.upc-message { position: fixed; z-index: 1999; width: 100%; top: 36px; left: 0; pointer-events: none; padding: 8px; text-align: center; } .upc-message i { margin-right: 8px; font-size: 14px; top: 1px; position: relative; } .upc-message-success i { color: green; } .upc-message-warning i { color: yellow; } .upc-message-error i { color: red; } .upc-message-content { padding: 8px 16px; -ms-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 2px 8px #000000; -ms-box-shadow: 0 2px 8px #000000; box-shadow: 0 2px 8px #000000; box-shadow: 0 2px 8px rgba(0,0,0,.2); background: #fff; display: inline-block; pointer-events: all; }
ComponentLoader
通過官方文檔動(dòng)態(tài)組件一節(jié),可以了解動(dòng)態(tài)創(chuàng)建組件需要通過ComponentFactoryResolver來完成。使用ComponentFactoryResolver創(chuàng)建ComponentFactory,再通過ComponentFactory的create方法創(chuàng)建組件??垂俜轿臋n中API的說明,ComponentFactory的create方法至少需要一個(gè)injector參數(shù),而injector的創(chuàng)建在文檔中也有提到,其中參數(shù)providers為需要注入的類。再梳理下整個(gè)過程:
提供providers
創(chuàng)建Injector實(shí)例
創(chuàng)建ComponetFactory
使用ComponetFactory創(chuàng)建ComponentRef
//ComponentFactory的create方法 create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any, ngModule?: NgModuleRef<any>): ComponentRef<C> //使用Injector的create創(chuàng)建injector實(shí)例 static create(providers: StaticProvider[], parent?: Injector): Injector
為了代碼的復(fù)用,這里創(chuàng)建通用的loader類來完成組件的動(dòng)態(tài)創(chuàng)建。其中,attch方法用于初始化ComponetFactory(參數(shù)為組件類型);to方法用于標(biāo)識組件的父容器;provider方法用于初始化可注入的類;create方法用于創(chuàng)建組件并手動(dòng)變更檢測;remove方法用于移除組件。
import { ComponentFactoryResolver, ComponentFactory, ComponentRef, Type, Injector, Provider, ElementRef } from '@angular/core'; export class ComponentLoader<T>{ constructor(private _cfr: ComponentFactoryResolver, private _injector: Injector) { } private _componentFactory: ComponentFactory<T> attch(componentType: Type<T>): ComponentLoader<T> { this._componentFactory = this._cfr.resolveComponentFactory<T>(componentType); return this; } private _parent: Element to(parent: string | ElementRef): ComponentLoader<T> { if (parent instanceof ElementRef) { this._parent = parent.nativeElement; } else { this._parent = document.querySelector(parent); } return this; } private _providers: Provider[] = []; provider(provider: Provider) { this._providers.push(provider); } create(opts: {}): ComponentRef<T> { const injector = Injector.create(this._providers as any[], this._injector); const componentRef = this._componentFactory.create(injector); Object.assign(componentRef.instance, opts); if (this._parent) { this._parent.appendChild(componentRef.location.nativeElement); } componentRef.changeDetectorRef.markForCheck(); componentRef.changeDetectorRef.detectChanges(); return componentRef; } remove(ref:ComponentRef<T>){ if(this._parent){ this._parent.removeChild(ref.location.nativeElement) } ref=null; } }
同時(shí),為了便于loader的創(chuàng)建,再創(chuàng)建LoaderFactory類,代碼如下:
import { ComponentFactoryResolver, Injector, Injectable, ElementRef } from '@angular/core'; import { ComponentLoader } from './component-loader.class'; @Injectable() export class ComponentLoaderFactory { constructor(private _injector: Injector, private _cfr: ComponentFactoryResolver) { } create<T>(): ComponentLoader<T> { return new ComponentLoader(this._cfr, this._injector); } }
message service
message service提供顯示message的API,代碼如下:
import {Injectable,Injector} from '@angular/core'; import { ComponentLoaderFactory } from '../component-loader/component-loader.factory'; import {MessageComponent} from './message.component'; import {ComponentLoader} from '../component-loader/component-loader.class'; @Injectable() export class MessageService{ constructor(private _clf:ComponentLoaderFactory,private _injector:Injector){ this.loader=this._clf.create<MessageComponent>(); } private loader:ComponentLoader<MessageComponent> private createMessage(t,c,duration=2000){ this.loader.attch(MessageComponent).to('body'); const opts = { msgType: t, payload:c }; const ref = this.loader.create(opts); ref.changeDetectorRef.markForCheck(); ref.changeDetectorRef.detectChanges(); let self=this; let st = setTimeout(() => { self.loader.remove(ref); }, duration); } public info(payload,duration?) { this.createMessage('info',payload,duration); } public success(payload,duration?) { this.createMessage('success',payload,duration); } public error(payload,duration?) { this.createMessage('error',payload,duration); } public warning(payload,duration?) { this.createMessage('warning',payload,duration); } }
message.module
最后,增加message.module.ts。記得要把動(dòng)態(tài)創(chuàng)建的組件添加到entryComponents數(shù)組中。
import {NgModule} from '@angular/core'; import { CommonModule } from '@angular/common'; import {MessageComponent} from './message.component'; import {MessageService} from './message.service'; import {ComponentLoaderFactory} from '../component-loader/component-loader.factory'; @NgModule({ imports:[CommonModule], declarations:[MessageComponent], providers:[MessageService,ComponentLoaderFactory], entryComponents:[MessageComponent], exports:[MessageComponent] }) export class MessageModule{ }
使用方法
注入MessageService,調(diào)用API使用Message組件。
this._msgService.success('成功了!');
以上是“如何實(shí)現(xiàn)一個(gè)angular版本的Message組件”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。