angular-封装弹窗公共服务

目录

1：初始化

1.1：创建项目

1.2：创建弹窗组件  

1.3：创建消息提醒服务 

2：编码

2.1：组件代码

 2.2：代码样例

3：测试

---

1：初始化

1.1：创建项目

项目名称：message
使用命令：ng new message

项目创建时会有以下两个选项：

是否加载路由：NO

选择样式单元：CSS

这里我们选择默认就好

开始执行加载npm包

 

 加载完成项目创建完毕。

1.2：创建弹窗组件  

切换到message包路径下：

cd message

创建弹窗组件：

组件名称：confirm
ng g component confirm

 

1.3：创建消息提醒服务 

服务名称：notify
ng g service notify

 至此我们需要的代码包已创建完毕，接下来正式编码

2：编码

2.1：组件代码

使用vscode打开刚才创建的message项目

 

2.2：代码样例

confirm.component.css:

.layer{

    animation: message-show .3s;

    top: 0;

    z-index: 2000;

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: rgba(50, 50, 50, .02);

}

.message{

    position: absolute;

    z-index: 2001;

    box-shadow: 0 0 10px rgba(233, 150, 122, .3);

    width: 80%;

    min-height: 100px;

    border-radius: 3px;

    top: calc(50% - 50px);

    left:10%;

    background-color: white;

    text-align: center;

    border: 1px solid rgba(233, 150, 122, .3);

}

.message>div:first-child{

margin: 10px 0 20px 0;

padding-left: 10px;

text-align: left;

font-size: 18px;

font-weight: bold;

border-bottom: 1px solid rgba(233, 150, 122, .3);

}

.message>div:last-child{

    margin: 10px 0 10px 0;

    padding-top: 10px;

    font-size: 14px;

}

.message>div:last-child>button{

    padding: 3px 10px;

}

.message>div:last-child>button:first-child{

  margin-right: 30px;

  background: #f0c14b;

  background: linear-gradient(to bottom,#f7dfa5,#f0c14b);

  border-color: #f7dfa5;

}

confirm.component.html:

<div class="layer">

    <div class="message">

        <div>{{message.title}}</div>

        <div>{{message.body}}</div>

        <div>

            <button class="btn" (click)="yes()">确认</button>

            <button class="btn" (click)="no()">取消</button>

        </div>

    </div>

</div>

confirm.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-confirm',

  templateUrl: './confirm.component.html',

  styleUrls: ['./confirm.component.css']

})

export class ConfirmComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }

  //确认提示

  message!: {

    title: string;

    body: string;

  };

  onChoose!: (yesOrNo: boolean) => void;

  yes(): void {

    this.onChoose(true)

  }

  no(): void {

    this.onChoose(false);

  }

}

notify.service.ts:

import { Injectable, ApplicationRef, ComponentFactoryResolver, ComponentFactory, ComponentRef, Injector } from '@angular/core';

import { Observable, Subscriber } from 'rxjs'; //导入可观察对象类和订阅者/观察者类

import { ConfirmComponent } from './confirm/confirm.component';

/**

 * 消息提醒服务

 */

@Injectable()

export class NotifyService {

  //确认提示组件工厂

  private confirmComponentFactory: ComponentFactory<ConfirmComponent>;

  /**

   * 构造确认提示服务

   */

  constructor(private appRPf: ApplicationRef, private componentFatorResolve:

    ComponentFactoryResolver, private injector: Injector) {

    this.confirmComponentFactory = this.componentFatorResolve.resolveComponentFactory(ConfirmComponent);

  }

  confirm(message: { title: string, body: string }): Observable<boolean> {

    let confrimComponentRef: ComponentRef<ConfirmComponent> = this.confirmComponentFactory.create(this.injector);

    this.appRPf.attachView(confrimComponentRef.hostView);

    let domElement=confrimComponentRef.location.nativeElement;

    document.body.appendChild(domElement);

    let confirmComponent:ConfirmComponent=confrimComponentRef.instance;

    confirmComponent.message=message;

    let subscriber:Subscriber<boolean>;

    let confirmObservable:Observable<boolean> =new Observable(

      (x)=>{

        subscriber=x;

      }

    );

    confirmComponent.onChoose=(yesOrNo:boolean)=>{

      this.appRPf.detachView(confrimComponentRef.hostView);

      confrimComponentRef.destroy();

      domElement.remove();

      if(subscriber){

          subscriber.next(yesOrNo);

      }

    }

    return confirmObservable;

  }

}

至此组件与服务开发完毕

3：测试

app.component.html:

<button class="btn" (click)="notify()">确认提示消息吗</button>

app.component.ts:

import { Component } from '@angular/core';

import { NotifyService } from './notify.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor(private notifyService:NotifyService ){

  }

  notify(){

    this.notifyService.confirm({ title: "弹出层标题", body: "提示信息内容，各业务系统参照规范要求" });

  }

}

app.module.ts:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { ConfirmComponent } from './confirm/confirm.component';

import { NotifyService } from './notify.service';

@NgModule({

  declarations: [

    AppComponent,

    ConfirmComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [NotifyService],

  bootstrap: [AppComponent]

})

export class AppModule { }

启动项目：ng serve --open