欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular彈出模態(tài)框的兩種方式

 更新時間：2017年10月19日 08:20:22   作者：fyk曩昔  
這篇文章主要介紹了Angular彈出模態(tài)框的兩種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

在開始我們的blog之前，我們要先安裝ngx-bootstrap-modal

npm install ngx-bootstrap-modal --save

不然我們的模態(tài)框效果會難看到你想吐

一、彈出方式一(此方法來自https://github.com/cipchk/ngx-bootstrap-modal)

1.alert彈框

(1)demo目錄

--------app.component.ts

--------app.component.html

--------app.module.ts

--------detail(文件夾)

------------detail.component.ts

------------detail.component.html

(2)demo代碼

app.module.ts導(dǎo)入必要的BootstrapModalModule 和ModalModule ，再注冊它們

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//這種模態(tài)框只需要導(dǎo)入下面這兩個
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
@NgModule({
 declarations: [
 AppComponent,
 DetailComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule
 ],
 providers: [],
 entryComponents: [
 DetailComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html創(chuàng)建一個可以彈出模態(tài)框的按鈕

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-primary" (click)="showAlert()">alert模態(tài)框</button>
 </div> 
</div>

app.component.ts編寫這個按鈕的動作showAlert()

import { Component } from '@angular/core';
import { DialogService } from "ngx-bootstrap-modal";
import { DetailComponent } from './detail/detail.component'
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService) {
 } 
 showAlert() {
  this.dialogService.addDialog(DetailComponent, { title: 'Alert title!', message: 'Alert message!!!' });
 }
}

detail.component.html編寫alert彈框的布局

<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" (click)="close()" >×</button>
   <h4 class="modal-title">{{title}}</h4>
  </div>
  <div class="modal-body">
   這是alert彈框
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-primary" (click)="close()">取消</button>
   <button type="button" class="btn btn-default">確定</button>
  </div>
 </div>
</div>

detail.component.ts創(chuàng)建模態(tài)框組件，我們需要創(chuàng)建一個組件，然后由 ngx-bootstrap-model 幫忙引導(dǎo)啟動
對于這個組件需要繼承 DialogComponent<T, T1> 類，包含兩個參數(shù)：

T 外部傳參給模態(tài)框的類型。

T1 模態(tài)框返回值類型。

因此，DialogService應(yīng)該是DialogComponent的一個構(gòu)造函數(shù)的參數(shù)。

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from 'ngx-bootstrap-modal';
export interface AlertModel {
 title: string;
 message: string;
}
@Component({
 selector: 'alert',
 templateUrl: './detail.component.html',
 styleUrls: ['./detail.component.css']
})
export class DetailComponent extends DialogComponent<AlertModel, null> implements AlertModel {
 title: string;
 message: string;
 constructor(dialogService: DialogService) {
 super(dialogService);
 }
}

2.confirm彈框

(1)demo目錄

--------app.component.ts
--------app.component.html
--------app.module.ts
--------confirm(文件夾)
------------confirm.component.ts
------------confirm.component.html

(2)demo代碼

app.module.ts導(dǎo)入必要的BootstrapModalModule 和ModalModule ，再注冊它們，這些都跟alert彈框一樣，因為這些都是方法一的彈出方式

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//這種模態(tài)框只需要導(dǎo)入下面這兩個
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
@NgModule({
 declarations: [
 AppComponent,
 DetailComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule
 ],
 providers: [],
 entryComponents: [
 DetailComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html創(chuàng)建一個可以彈出模態(tài)框的按鈕

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-primary" (click)="showConfirm()">modal模態(tài)框</button>
 </div> 
</div>

app.component.ts編寫這個按鈕的動作showConfirm()

import { Component } from '@angular/core';
import { DialogService } from "ngx-bootstrap-modal";
import { ConfirmComponent } from './confirm/confirm.component'
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService,private modalService: BsModalService) {
 }
 showConfirm() {
  this.dialogService.addDialog(ConfirmComponent, {
   title: 'Confirmation',
   message: 'bla bla'
  })
   .subscribe((isConfirmed) => {
   });
 }
}

confirm.component.html編寫confirm彈框的布局

<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" (click)="close()" >×</button>
   <h4 class="modal-title">{{title}}</h4>
  </div>
  <div class="modal-body">
   這是confirm彈框
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-primary" (click)="close()">取消</button>
   <button type="button" class="btn btn-default">確定</button>
  </div>
 </div>
</div>

confirm.component.ts創(chuàng)建模態(tài)框組件

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from 'ngx-bootstrap-modal';
export interface ConfirmModel {
 title:string;
 message:any;
}
@Component({
 selector: 'confirm',
 templateUrl: './confirm.component.html',
 styleUrls: ['./confirm.component.css']
})
export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
 title: string;
 message: any;
 constructor(dialogService: DialogService) {
 super(dialogService);
 }
 confirm() {
 // on click on confirm button we set dialog result as true,
 // ten we can get dialog result from caller code
 this.close(true);
 }
 cancel() {
 this.close(false);
 }
}

3.內(nèi)置彈框

(1)demo目錄

--------app.component.ts

--------app.component.html
--------app.module.ts

(2)demo代碼

內(nèi)置彈框也包括 alert confirm prompt 三種形態(tài)，都有一些內(nèi)置的樣式

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule,
 ModalModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html很簡單，就一個按鈕

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-default" (click)="show()">內(nèi)置</button>
 </div> 
</div>

app.component.ts很簡單，連組件的布局都不用寫，傳入一些參數(shù)比如圖標icon，大小size等

import { Component } from '@angular/core';
import { DialogService, BuiltInOptions } from "ngx-bootstrap-modal";
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService) {
 }
 show(){
  this.dialogService.show(<BuiltInOptions>{
   content: '保存成功',
   icon: 'success',
   size: 'sm',
   showCancelButton: false
  })
 }
}

二、彈出方式二(此方法來自https://valor-software.com/ngx-bootstrap/#/modals)

還是跟上一種方法一樣，先安裝ngx-bootstrap-modal，然后導(dǎo)入bootstrap樣式表

1.demo目錄

--------app.component.ts
--------app.component.html
--------app.module.ts

2.demo代碼

app.module.ts導(dǎo)入相應(yīng)模塊，并且注冊它們

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 ModalModule.forRoot()
 ],
 providers: [],
 entryComponents: [
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component,TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 public modalRef: BsModalRef;
 constructor(private modalService: BsModalService) {
 }
 showSecond(template: TemplateRef<any>){//傳入的是一個組件
  this.modalRef = this.modalService.show(template,{class: 'modal-lg'});//在這里通過BsModalService里面的show方法把它顯示出來
 };
}

app.component.html

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-success" (click)="showSecond(Template)">第二種彈出方式</button>
 </div> 
</div>
<!--第二種彈出方法的組件-->
<template #Template>
 <div class="modal-header tips-modal-header">
 <h4 class="modal-title pull-left">第二種模態(tài)框</h4>
 <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
  <span aria-hidden="true">×</span>
 </button>
 </div>
 <div class="modal-body tips-modal-body">
 <div class="tips-contain"><span>第二種模態(tài)框彈出方式</span></div>
 </div>
 <div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="modalRef.hide()">確定</button>
  <button type="button" class="btn btn-default" (click)="modalRef.hide()">取消</button>
 </div>
</template>

三、最終效果

我們將上面所有的彈框全部寫在一起，然后效果就是這樣的

總結(jié)

以上所述是小編給大家介紹的Angular彈出模態(tài)框的兩種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論