動(dòng)手寫(xiě)一個(gè)angular版本的Message組件的方法

//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;
 }

//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

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;
 }
}

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);
 }
}

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);
 }
}

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{
}

this._msgService.success('成功了!');