首頁 web前端 js教程 兩種Angular彈出模態框的方式

兩種Angular彈出模態框的方式

Jan 09, 2018 pm 01:25 PM
angular 方式 模態

本文主要介紹了Angular彈出模態框的兩種方式,非常不錯,具有參考借鑒價值,需要的朋友可以參考下,希望能幫助到大家。

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

npm install ngx-bootstrap-modal --save
登入後複製

不然我們的模態框效果會難看到你想吐

一、彈出方式一(此方法來自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導入必要的BootstrapModalModule 和ModalModule ,再註冊它們

//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';
import { DetailComponent } from './detail/detail.component';
@NgModule({
 declarations: [
 AppComponent,
 DetailComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule
 ],
 providers: [],
 entryComponents: [
 DetailComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }
登入後複製
登入後複製

app.component.html建立一個可以彈出模態框的按鈕

<p class="container">
 <p class="row">
 <button type="button" class="btn btn-primary" (click)="showAlert()">alert模态框</button>
 </p> 
</p>
登入後複製

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彈框的佈局

<p class="modal-dialog">
 <p class="modal-content">
  <p class="modal-header">
   <button type="button" class="close" (click)="close()" >×</button>
   <h4 class="modal-title">{{title}}</h4>
  </p>
  <p class="modal-body">
   这是alert弹框
  </p>
  <p class="modal-footer">
   <button type="button" class="btn btn-primary" (click)="close()">取消</button>
   <button type="button" class="btn btn-default">确定</button>
  </p>
 </p>
</p>
登入後複製

detail.component.ts建立模態框元件,我們需要建立一個元件,然後由ngx-bootstrap-model 幫忙引導啟動
對於這個元件需要繼承DialogComponent<T, T1> 類,包含兩個參數:

T 外部傳給模態框的型別。

T1 模態框傳回值類型。

因此,DialogService應該是DialogComponent的一個建構子的參數。

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&lt;AlertModel, null&gt; 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導入必要的BootstrapModalModule 和ModalModule ,再註冊它們,這些都跟alert彈框一樣,因為這些都是方法一的彈出方式

//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';
import { DetailComponent } from './detail/detail.component';
@NgModule({
 declarations: [
 AppComponent,
 DetailComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule
 ],
 providers: [],
 entryComponents: [
 DetailComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }
登入後複製
登入後複製

app.component.html創建一個可以彈出模態框的按鈕

&lt;p class=&quot;container&quot;&gt;
 &lt;p class=&quot;row&quot;&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; (click)=&quot;showConfirm()&quot;&gt;modal模态框&lt;/button&gt;
 &lt;/p&gt; 
&lt;/p&gt;
登入後複製

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) =&gt; {
   });
 }
}
登入後複製

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

&lt;p class=&quot;modal-dialog&quot;&gt;
 &lt;p class=&quot;modal-content&quot;&gt;
  &lt;p class=&quot;modal-header&quot;&gt;
   &lt;button type=&quot;button&quot; class=&quot;close&quot; (click)=&quot;close()&quot; &gt;×&lt;/button&gt;
   &lt;h4 class=&quot;modal-title&quot;&gt;{{title}}&lt;/h4&gt;
  &lt;/p&gt;
  &lt;p class=&quot;modal-body&quot;&gt;
   这是confirm弹框
  &lt;/p&gt;
  &lt;p class=&quot;modal-footer&quot;&gt;
   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; (click)=&quot;close()&quot;&gt;取消&lt;/button&gt;
   &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;确定&lt;/button&gt;
  &lt;/p&gt;
 &lt;/p&gt;
&lt;/p&gt;
登入後複製

confirm.component. ts建立模態框元件

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&lt;ConfirmModel, boolean&gt; 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.內建彈框

(1)demo目錄

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

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

#(2)demo程式碼

內建彈框也包含alert confirm prompt 三種形態,都有一些內建的樣式

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很簡單,就一個按鈕

&lt;p class=&quot;container&quot;&gt;
 &lt;p class=&quot;row&quot;&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; (click)=&quot;show()&quot;&gt;内置&lt;/button&gt;
 &lt;/p&gt; 
&lt;/p&gt;
登入後複製

app.component.ts很簡單,連組件的佈局都不用寫,傳入一些參數比如圖標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(&lt;BuiltInOptions&gt;{
   content: '保存成功',
   icon: 'success',
   size: 'sm',
   showCancelButton: false
  })
 }
}
登入後複製

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

還是跟上一個方法一樣,先安裝ngx-bootstrap-modal,然後再導入bootstrap樣式表

1.demo目錄

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

2.demo代碼

app.module.ts導入對應模組,並且註冊它們

//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&lt;any&gt;){//传入的是一个组件
  this.modalRef = this.modalService.show(template,{class: 'modal-lg'});//在这里通过BsModalService里面的show方法把它显示出来
 };
}
登入後複製

app.component.html

&lt;p class=&quot;container&quot;&gt;
 &lt;p class=&quot;row&quot;&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; (click)=&quot;showSecond(Template)&quot;&gt;第二种弹出方式&lt;/button&gt;
 &lt;/p&gt; 
&lt;/p&gt;
&lt;!--第二种弹出方法的组件--&gt;
&lt;template #Template&gt;
 &lt;p class=&quot;modal-header tips-modal-header&quot;&gt;
 &lt;h4 class=&quot;modal-title pull-left&quot;&gt;第二种模态框&lt;/h4&gt;
 &lt;button type=&quot;button&quot; class=&quot;close pull-right&quot; aria-label=&quot;Close&quot; (click)=&quot;modalRef.hide()&quot;&gt;
  &lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;
 &lt;/button&gt;
 &lt;/p&gt;
 &lt;p class=&quot;modal-body tips-modal-body&quot;&gt;
 &lt;p class=&quot;tips-contain&quot;&gt;&lt;span&gt;第二种模态框弹出方式&lt;/span&gt;&lt;/p&gt;
 &lt;/p&gt;
 &lt;p class=&quot;modal-footer&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; (click)=&quot;modalRef.hide()&quot;&gt;确定&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; (click)=&quot;modalRef.hide()&quot;&gt;取消&lt;/button&gt;
 &lt;/p&gt;
&lt;/template&gt;
登入後複製

三、最終效果

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

相關推薦:

BootStrap模態框不垂直居中如何解決

bootstrap模態框嵌套、tabindex屬性、去除陰影的方法

詳解bootstrap3-dialog-master模態方塊用法

以上是兩種Angular彈出模態框的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在Ubuntu 24.04上安裝Angular 如何在Ubuntu 24.04上安裝Angular Mar 23, 2024 pm 12:20 PM

如何在Ubuntu 24.04上安裝Angular

angular學習之詳解狀態管理器NgRx angular學習之詳解狀態管理器NgRx May 25, 2022 am 11:01 AM

angular學習之詳解狀態管理器NgRx

淺析angular中怎麼使用monaco-editor 淺析angular中怎麼使用monaco-editor Oct 17, 2022 pm 08:04 PM

淺析angular中怎麼使用monaco-editor

一文探究Angular中的服務端渲染(SSR) 一文探究Angular中的服務端渲染(SSR) Dec 27, 2022 pm 07:24 PM

一文探究Angular中的服務端渲染(SSR)

專案過大怎麼辦?如何合理拆分Angular項目? 專案過大怎麼辦?如何合理拆分Angular項目? Jul 26, 2022 pm 07:18 PM

專案過大怎麼辦?如何合理拆分Angular項目?

聊聊自訂angular-datetime-picker格式的方法 聊聊自訂angular-datetime-picker格式的方法 Sep 08, 2022 pm 08:29 PM

聊聊自訂angular-datetime-picker格式的方法

聊聊Angular Route中怎麼提前取得數據 聊聊Angular Route中怎麼提前取得數據 Jul 13, 2022 pm 08:00 PM

聊聊Angular Route中怎麼提前取得數據

Angular元件及其顯示屬性:了解非block預設值 Angular元件及其顯示屬性:了解非block預設值 Mar 15, 2024 pm 04:51 PM

Angular元件及其顯示屬性:了解非block預設值

See all articles