Angular與模態框的通訊

来源:http://www.cnblogs.com/nangxi/archive/2017/11/21/7874398.html
-Advertisement-
Play Games

Angular做項目的時候，難免會用到彈框（即模態框），如果模態框裡面有一張表格，表格裡面的數據需要從父組件（這裡暫且先說成父組件吧！）裡面獲取，模態框的表格裡面的數據經過修改，又傳回給父組件，這種通訊方式該怎麼實現？我們先來看一下最基本的自定義彈框代碼，看看有沒有什麼突破口。 一、基本的自定義彈框 ...


Angular做項目的時候，難免會用到彈框（即模態框），如果模態框裡面有一張表格，表格裡面的數據需要從父組件（這裡暫且先說成父組件吧！）裡面獲取，模態框的表格裡面的數據經過修改，又傳回給父組件，這種通訊方式該怎麼實現？我們先來看一下最基本的自定義彈框代碼，看看有沒有什麼突破口。

一、基本的自定義彈框代碼

1.demo目錄

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

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

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

----------confirm(文件夾)

------------confirm.component.ts

------------confirm.component.html

2.項目代碼

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { AppComponent } from './app.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
  declarations: [
    AppComponent,
    ConfirmComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BootstrapModalModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    ConfirmComponent
    ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { ConfirmComponent } from './confirm/confirm.component';
import { DialogService } from "ngx-bootstrap-modal";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
   constructor(private dialogService:DialogService) {}
    showConfirm() {
        this.dialogService.addDialog(ConfirmComponent, {
            title:'Confirm title', 
            message:'Confirm message'})
            .subscribe((isConfirmed)=>{
                if(isConfirmed) {}
                else {}
            });
    }
}

app.component.html

<button type="button" class="btn btn-primary" (click)="showConfirm()">彈框</button>

confirm.component.ts

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ngx-bootstrap-modal";
export interface ConfirmModel {
  title:string;
  message:string;
}

@Component({  
    selector: 'confirm',
    templateUrl: './confirm.component.html',
    styleUrls: ['./confirm.component.css']
})
export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
  title: string;
  message: string;

  // 構造函數需要一個DialogService參數
  constructor(dialogService: DialogService) {
    super(dialogService);
  }
  
  confirm() {
    // result是一個boolean類型，這一點取決於{DialogComponent<ConfirmModel, boolean>}
    this.result = true;
    // close() 方法是由 `DialogComponent` 定義的，用於關閉模態框。在HTML模板中也有可以調用。
    this.close(); 
  }
}

confirm.component.html

<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">
      <p>{{message}}</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
      <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
    </div>
  </div>
</div>

3.分析

我們來看一下app.component.ts和confirm.component.ts裡面的title和message，感覺好像有點貓膩。我們看一下效果圖就知道了。

我們會發現，這個Confirm title和Confirm message不就是通過app.component.ts裡面的title和message傳進去的嘛？那這就好辦了，至少可以證明，父組件的數據可以傳到彈框裡面。那麼我們再修改一下這個項目，讓它實現父組件表格裡面的數據傳遞到彈框裡面並且把它渲染出來。

二、父組件數據傳遞到彈框

1.demo目錄(項目目錄不變)

2.項目代碼

app.component.ts

import { Component } from '@angular/core';
import { ConfirmComponent } from './confirm/confirm.component';
import { DialogService } from "ngx-bootstrap-modal";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  datas=[//父組件裡面的數據
    {
      name:"Mr.Chen",
      id:1001
    },
    {
      name:"Miss.Lee",
      id:1003
    },
    {
      name:"Mr.Fang",
      id:1006
    },
    {
      name:"Miss.Lin",
      id:1009
    }
  ]
  constructor(private dialogService:DialogService) {}
  showConfirm() {
    this.dialogService.addDialog(ConfirmComponent, {
      title:'Confirm title', 
      message: this.datas//傳遞給彈框
    })
    .subscribe((isConfirmed)=>{
      if(isConfirmed) {}
      else {}
      });
    }
}

app.component.html(在父組件渲染)

<button type="button" class="btn btn-primary" (click)="showConfirm()">彈框</button>
<table class="table">
  <tr>
    <th>編號</th>
    <th>姓名</th>
    <th>學號</th>
  </tr>
  <tr *ngFor="let data of datas;let i=index">
    <td>{{i+1}}</td>
    <td>{{data.name}}</td>
    <td>{{data.id}}</td>
  </tr>
</table>

confirm.component.ts

import { Component,OnInit } 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;//這裡的類型也要更改
  ArrayData:any;
  ngOnInit(){
    this.ArrayData=this.message;//將父組件傳遞過來的值賦值給新的變數
  }
  // 構造函數需要一個DialogService參數
  constructor(dialogService: DialogService) {
    super(dialogService);
  }
  
  confirm() {
    // result是一個boolean類型，這一點取決於{DialogComponent<ConfirmModel, boolean>}
    this.result = true;
    // close() 方法是由 `DialogComponent` 定義的，用於關閉模態框。在HTML模板中也有可以調用。
    this.close(); 
  }
}

confirm.component.html(在彈框中渲染)

<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">
      <table class="table">
        <tr>
          <th>編號</th>
          <th>姓名</th>
          <th>學號</th>
        </tr>
        <tr *ngFor="let Data of ArrayData;let i=index">
          <td>{{i+1}}</td>
          <td>{{Data.name}}</td>
          <td>{{Data.id}}</td>
        </tr>
      </table>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
      <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
    </div>
  </div>
</div>

至此我們實現的只是數據從父組件到彈框的單向傳遞，我們來看一下效果。

三、彈框數據返傳給父組件

那麼反過來呢？彈框的數據要怎麼傳遞給它的父組件，我們再來深究一下彈框裡面的代碼。

在app.component.ts裡面，有一個判斷語句if(isConfirmed) {}如果彈框關閉，那麼isConfirmed為true，進而執行if語句裡面的代碼。等等，為什麼點擊關閉按鈕之後，isConfirmed會是true呢？我們再看看關閉按鈕點擊之後執行的函數

confirm() {
    // result是一個boolean類型，這一點取決於{DialogComponent<ConfirmModel, boolean>}
    this.result = true;
    // close() 方法是由 `DialogComponent` 定義的，用於關閉模態框。在HTML模板中也有可以調用。
    this.close(); 
  }

也就是這個confirm方法，我們看到裡面有一句this.result = true;會不會是它搗的鬼。我們把this.result賦值一個字元串，然後審查一下isConfirmed有沒有改變。

在這之前我們先來確認一下原來的isConfirmed是什麼東西。

我們發現原來的isConfirmed是true，現在開始賦值為字元串“測試”。在修改result之前還要將DialogComponent<ConfirmModel, boolean>修改為DialogComponent<ConfirmModel, any>，正如上面所講，result是一個boolean類型，這一點取決於{DialogComponent<ConfirmModel, boolean>}。修改之後再審查一下。

我們發現變成測試了，這時候我們就知道了，彈框裡面的數據要返傳給父組件，可以通過result，傳遞什麼類型， 就在{DialogComponent<ConfirmModel, boolean>}做相應的類型修改。當result有賦值，即存在的時候，在app.component.ts就執行if裡面的語句，如果不存在，或者為false，就執行else裡面的語句。

四、註意

在使用該彈框的時候，有一個版本問題，如果不做任何修改，在app.module.ts導入BootstrapModalModule的時候會出現下麵的錯誤：

Metadata version mismatch for module C:/Users/ASUS/Desktop/angular/App/node_modules/ngx-bootstrap-modal/index.d.ts, found version 4,expected 3, resolving
symbol AppModulein C:/Users/ASUS/Desktop/angular/App/src/app/app.module.ts, resolving symbol AppModule
in C:/Users/ASUS/Desktop/angular/App/src/app/app.module.ts

這個錯誤只是版本的問題，嘗試一下在package.json文件裡面用"ngx-bootstrap-modal": "1.0.12"這個版本，就可以了。

詳細的彈框使用可以查看http://blog.csdn.net/qq_34551390/article/details/78270869

 

 

 



 





 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 小知識（h5 js ）
    1.如果都為NaN但是他們不相等var a=NaN;var b=NaN;a==b //flase2.javascript 是一種腳本語言，可以創建伺服器端和客戶端的腳本3.javascript 中有兩個特殊數據類型 null undefined4.判斷一個是不是屬於那個類型 instanceofin ...
  • javaScript字元串方法
    str='我是一串字元串' charAt() //獲取一整串字元串其中的某一個子字元串 取值範圍：0~字元串長度-1 alert ( str.charAt() ) //我 括弧裡面什麼都不寫時預設是第0個 alert ( str.charAt(4) ) //符 alert ( str.sharAt( ...
  • 拋棄JQ，回歸原生js……
    之前我寫過一篇文章叫做《jq不會被淘汰》……而事實上它真的不會被淘汰，因為即使在mvvm框架盛行的今天，原生js的api越來越友好的今天，jq依然在用戶量上是霸主…… 但是今天我們要討論的是，拋棄jq，擁抱原生js…… 再說正題之前，我們先來看看jq比js，解決了哪些問題，哪裡更優秀 1.首當其衝是 ...
  • js的數組方法整理
    slice 從已有的數組中返回選定的元素。該方法不會修改數組，而是返回一個子數組。 語法：arr.slice(start,end) start: 必須，規定從何處開始選取。如果是負數，就是從尾部開始算起的位置（-1指最後一個元素，-2指倒數第二個元素）； end: 可選，規定從何處結束選取。如果沒有 ...
  • bootstrap下拉框支持多選
    今天有了一個新需求,就是下拉框採用多選,因為以前都是用Extjs的多選框組件,領導說不好看,所以我就用了bootstrap框架實現,我現在把代碼共用一下,大家有需要的直接在hBuilder中打開,可以直接運行.下麵說一下我整合進項目中遇到的問題:1.寬高,邊距等等調整;如果想改下拉框的寬度直接修改b ...
  • html5知識點：超文本標記語言編程
    超文本標記語言，標準通用標記語言下的一個應用。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。 ...
  • jQuery回車事件
    簡單地記下jquery實現回車事件 全局： $(function(){document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.keyCode==13) { $('#FormId).submit ...
  • JS中的正則表達式
    如果對於正則基礎沒有太多瞭解的同學可以先看這篇文章： "初探正則表達式" 。 正則表達式是一個描述字元模式的對象， 的 類表示正則表達式， 和 都定義了方法，後者使用正則表達式進行強大的模式匹配和文本檢索於替換功能。 的正則表達式語法是 的正則表達式語法的子集。 JS中正則表達式的定義 JavaSc ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類