学习一个框架或库的最好方法是看官方文档，并着手去写例子。最近在利用空闲的时间学习angular，那今天就尝试写一个message组件，并通过message服务动态加载message组件。
我所参与的项目基本是用jquery完成的。之前，在项目中自己动手写过一个简单的message插件，样子如下图。
那现在就使用angular（版本5.0.0）来实现message组件。
message组件
message组件要根据传入的类型、消息和duration来显示。创建三个文件：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
通过官方文档动态组件一节，可以了解动态创建组件需要通过ComponentFactoryResolver来完成。使用ComponentFactoryResolver创建ComponentFactory，再通过ComponentFactory的create方法创建组件。看官方文档中API的说明，ComponentFactory的create方法至少需要一个injector参数，而injector的创建在文档中也有提到，其中参数providers为需要注入的类。再梳理下整个过程：