介绍//message.component.ts
import {组件、输入、OnInit, ChangeDetectionStrategy},得到& # 39;@angular/核心# 39;;
import {
触发器,才能
状态,才能
风格,才能
过渡,才能
,动画
,}得到& # 39;@angular/动画# 39;;
const 映射={
成功:才能& # 39;glyphicon-ok-sign& # 39;
警告:才能& # 39;glyphicon-exclamation-sign& # 39;
错误:才能& # 39;glyphicon-exclamation-sign& # 39;
信息:& # 39;才能glyphicon-ok-circle& # 39;
}
@ component ({
选择器:才能& # 39;upc-ng-message& # 39;
templateUrl: & # 39;才能。/message.component.html& # 39;
styleUrls才能:[& # 39;。/message.component.css& # 39;],
changeDetection: ChangeDetectionStrategy.OnPush才能
}）
export class MessageComponent implements OnInit {
ngOnInit才能():,void {
,,,this.typeClass=[& # 39; upc-message & # 39;, +, this.msgType);
,,,this.typeIconClass=[[this.msgType]]的映射;
,,}
@Input才能(),msgType: & # 39;成功# 39;,|,& # 39;信息# 39;,|,& # 39;预警# 39;,|,& # 39;错误# 39;=& # 39;信息# 39;
@Input才能(),有效载荷:string =, & # 39; & # 39;
private typeClass才能
private typeIconClass才能
} & lt; !——* message.component.html祝辞
& lt; div 类=皍pc-message"祝辞
,,,& lt; div 类=皍pc-message-content", [ngClass]=皌ypeClass"比;
,,,,,& lt;小姐:类=癵lyphicon", [ngClass]=皌ypeIconClass"祝辞& lt;/i>
,,,,,{{载荷}}
,,,& lt;/div>
& lt;/div> .upc-message {
位置:才能,固定;
,,z - index: 1999;
,,宽度:100%;
,,:36 px;
,,左:0;
pointer-events才能:没有;
,,填充:8 px;
,,text-align:中心;
,}
,.upc-message 小姐:{
,,,margin-right: 8 px;
,,,字体大小:14 px;
,,,:1 px;
,,,位置:相对;
,}
,.upc-message-success 小姐:{
,,,颜色:绿色;
,}
,.upc-message-warning 小姐:{
,,,颜色:黄色;
,}
,.upc-message-error 小姐:{
,,,颜色:红色;
,}
,.upc-message-content {
,,,填充:8 px 16 px;
,,,-ms-border-radius: 4 px;
,,,这个特性:4 px;
,,,-webkit-box-shadow: 0, 2 px 8 px # 000000;
,,,-ms-box-shadow: 0, 2 px 8 px # 000000;
,,,不必:0,2 px 8 px # 000000;
,,,不必:0,2 px 8 px rgba (0, 0, 0, 0。2);
,,,背景:# fff;
,,,显示:inline-block;
,,,pointer-events:;
,} <李> //ComponentFactory的制造方法
创建(注射器,注射器:,projectableNodes ?:,任何[][],rootSelectorOrNode ?:,字符串|任何,,ngModule ?:, NgModuleRef):, ComponentRef//使用注射器的创造创建喷射器实例
static 创建(供应商:StaticProvider[],,家长?:,注射器):,注射器
这篇文章主要介绍如何实现一个角版本的消息组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
学习一个框架或库的最好方法是看官方文档,并着手去写例子。最近在利用空闲的时间学习角,那今天就尝试写一个消息组件,并通过消息服务动态加载消息组件。
我所参与的项目基本是用jquery完成的。之前,在项目中自己动手写过一个简单的消息插件,样子如下图。
那现在就使用角(版本5.0.0)来实现消息组件。
<强>消息组件
消息组件要根据传入的类型,消息和持续时间来显示。创建三个文件:message.component.ts, message.component.html, message.component.css,代码如下。
<强> ComponentLoader
通过官方文档动态组件一节,可以了解动态创建组件需要通过ComponentFactoryResolver来完成。使用ComponentFactoryResolver创建ComponentFactory,再通过ComponentFactory的制造方法创建组件。看官方文档中API的说明,ComponentFactory的制造方法至少需要一个注射器参数,而喷射器的创建在文档中也有提到,其中参数提供者为需要注入的类,再梳理下整个过程:
提供供应商
<李>创建喷射器实例
<李>创建ComponetFactory
<李>使用ComponetFactory创建ComponentRef
为了代码的复用,这里创建通用的装入器类来完成组件的动态创建。其中,填写方法用于初始化ComponetFactory(参数为组件类型);到方法用于标识组件的父容器;提供者方法用于初始化可注入的类;创建方法用于创建组件并手动变更检测;去除方法用于移除组件。
