一个具有高级功能和易用性的 Angular 模态对话框
介绍一种高级 Angular 模态对话框服务，并演示对话框的使用和问题解决方案（已更新至 Angular 11，并提供 npm 库包）。
- 下载 NgExDialog_AspNetCore_Ng11 - 62.6 KB
- 下载 NgExDialog_AspNet_Ng11 - 61.6 KB
- 下载 ngex-dialog.demo.Ng11 - 34.6 KB
引言
为了与 Angular 和 npm 包命名约定保持一致，模态对话框工具名称（除了示例应用程序或项目名称）已从 NgExDialoge 更改为 ngex-dialog。自代码从 AngularJs 版本重写以来，该工具和示例演示应用程序已随 Angular 版本多次更新。Angular 11 CLI 和包含 ASP.NET Core 5.0 的项目类型的源代码可供下载。如果您需要以前版本的 Angular 源代码，请参阅文章末尾的历史部分。
Angular ngex-dialog 具有以下功能：
- 易于使用，具有标准化和更简化的调用代码。
- 灵活可定制，适用于基本消息和数据显示目的。
- 对话框可以打开到任意深度，并且可以单独关闭或保持打开，与直接父级一起关闭，或全部关闭。
- 可配置所有选项，例如可拖动、动画、图标、灰色背景、点击外部关闭、取消确认等。
- 可以通过顶部偏移设置微调带有自定义和动态加载内容的对话框的垂直对齐。
- 可以为每个元素设置主题和样式，例如主对话框、标题、图标、消息正文、消息文本、页脚和按钮。
- 通过包含对话框服务所有脚本文件的单个目录作为从本文下载的源（源代码版）和通过 npm 安装的库包（库包版）进行分发。
Angular Web 应用程序的主要依赖项都适用于 ngex-dialog。请查看示例项目中的 package.json 文件以查看这些依赖的库工具和文件。您还需要在本地机器上全局安装 node.js（推荐版本 14.x LTS 或更高）和 Angular CLI（推荐版本 11.x 或更高）。请查看 node.js 和 Angular CLI 文档以获取详细信息。
设置示例应用程序
下载的源代码包含两种类型的 Visual Studio 解决方案/项目，其中包括 ngex-dialog 目录下的原始 TypeScript 模块和组件代码文件（源代码版），以及一种调用 ngex-dialog 库包的通用 Angular CLI 演示项目（npm 库包版）。请选择您想在本地机器上设置的类型。
您可以在 C:\Program Files (x86)\Microsoft SDKs\TypeScript 文件夹中查看 Visual Studio 可用的 TypeScript 版本。ASP.NET 和 Core 类型的示例应用程序都在 SM.NgDataCrud.Web.csproj 文件的 TypeScriptToolsVersion 节点中将 Visual Studio 的 TypeScript 版本设置为 4.0。如果您没有安装 4.0 版本，请从 Microsoft 网站下载安装包或安装包含 TypeScript 4.0 的 Visual Studio 2019 版本 16.8.x。
NgExDialog_AspNetCore_Cli
-
您需要在本地机器上使用 Visual Studio 2019（版本 16.8.x）。.NET Core 5.0 SDK 包含在 Visual Studio 安装中。
-
下载源代码文件并将其解压到您的本地工作区。
-
转到本地工作区的物理位置，然后依次双击 SM.NgExDialog.Sample\wwwroot\ang-content 文件夹下的 npm_install.bat 和 ng_build.bat（如果未全局安装 Angular CLI，则为 ng_build_local.bat）文件。
注意：每次在 TypeScript/JavaScript 代码中进行任何更改后，可能需要执行
ng build命令，而npm install的执行仅在 node 模块包有任何更新时才需要。在此示例应用程序中，我没有启用 CLI/Webpack 热模块替换 (HMR)。 -
使用Visual Studio 2019打开解决方案，并使用Visual Studio重新构建解决方案。
-
点击 IIS Express 工具栏命令（或按 F5）启动示例应用程序。
NgExDialog_AspNet_Cli
-
下载源代码文件并将其解压到您的本地工作区。
-
转到本地工作区的物理位置，然后依次双击 SM.NgExDialog.Sample\ang-content 文件夹下的 npm_install.bat 和 ng_build.bat（如果未全局安装 Angular CLI，则为 ng_build_local.bat）文件（另请参阅设置 NgExDialog_AspNetCore_Cli 项目的相同注意事项）。
-
使用 Visual Studio 2017 或 2019 打开解决方案，并使用 Visual Studio 重新构建解决方案。
-
点击 IIS Express 工具栏命令（或按 F5）启动示例应用程序。
ngex-dialog.demo
-
下载并将源代码文件解压到您的本地工作区（任何系统平台）。
-
转到本地工作区的物理位置并打开 ang-content 目录。
-
执行命令
npm install将 node_modules 添加到目录中。 -
从您的系统运行 Angular 项目应用程序以渲染 Dialog Demo 页面。
如果您想在 Visual Studio 项目中使用 ngex-dialog npm 库包，您可以简单地将 Visual Studio 项目中的 ang-content 文件夹替换为从下载的 ngex-dialog.demo 中获取的 ang-content 文件夹。然后您可以安装或更新 npm 包，然后构建 Angular 应用程序。
对话框访问场景和语法
ngex-dialog 是一个 Angular 服务提供者。您可以在后面的部分看到所有演示用例。要在您自己的项目中使用 ngex-dialog，您只需执行以下操作（另请参阅源代码文件中的详细信息）：
- 将整个 ngex-dialog 文件夹复制到您的开发项目位置，或通过 npm 安装或更新 package.json 将 ngex-dialog 库包添加到您的项目中。
-
使用 ex-dialog.css 文件添加和更新模态对话框的样式。有关详细信息，请参见 ang-content/src/assets/css/ex-dialog.css 中的示例。
-
将
DialogModule导入到您的 app.module.ts 中。 -
将
ExDialog（服务）导入到调用对话框服务的组件 ts 文件中。 -
将
ExDialog服务实例（例如exDialog）注入到组件类的构造函数中。constructor(private exDialog: ExDialog) { }
如果只需要默认设置，或者只指定了正文文本、标题或图标，您可以使用一行简单的参数打开消息或确认对话框。
语法
[observable-object] = exDialog.openMessage("body-text", ["title"], ["icon"]);
[observable-object] = exDialog.openConfirm("body-text", ["title"], ["icon"]);
如果需要除正文文本、标题或图标以外的任何非默认设置，您也可以使用带有所需属性的参数对象来创建消息或确认对话框。
语法
[observable-object] = exDialog.openMessage(parameter-object);
[observable-object] = exDialog.openConfirm(parameter-object);
调用打开任何自定义或数据加载对话框时，需要传递自定义对话框组件的名称以及具有所需属性的参数对象。
语法
[observable-object] = exDialog.openPrime(custom-component-name, parameter-object);
对于参数对象，除消息文本外，所有属性都是可选的。
对话框配置
对话框配置可以在应用程序级别或对话框级别设置。如果在这两个级别都设置了值，则对话框级别设置优先。
应用程序级设置
如果您需要将除默认值之外的配置值应用于应用程序中的所有模态对话框，您可以在调用方设置值，与 dialog-demo 代码中所示相同。
下面显示了 app.config.ts 中的部分项目。整个列表可在文件中查看，其中包含一些默认值和必要的注释（如果任何项目名称不是不言自明的）。
export const DialogConfig: any = {
//App level settings -----
topOffset: 50,
draggable: true,
animation: true,
grayBackground: true,
width: '40%',
closeDelay: 400,
closeByEnter: false,
closeByEscape: true,
closeByClickOutside: true,
- - -
};
在 app.component.ts 中，将配置设置合并到 ngex-dialog/dialog-config.ts 中的配置基类中，其中定义了所有默认值。
import { NgExDialogConfig } from '../ngex-dialog/dialog-config';
import { DialogConfig } from './app.config';
constructor(private ngExDialogConfig: NgExDialogConfig) {
}
ngOnInit() {
//Merge config items.
this.ngExDialogConfig.appConfig = DialogConfig;
}
对话框级设置
这些项目和值仅通过方法调用中的参数对象为单个模态对话框设置。您可以在下面的部分中看到许多示例。
对话框核心服务和组件概述
本文主要关注 ngex-dialog 的使用和问题解决方案。对对话框内部结构和代码感兴趣的人可以在示例应用程序的 ngex-dialog 文件夹中查看这些文件。下面列出了主要对话框服务和组件的角色和工作流概述供您参考。
-
ex-dialog.service.ts：作为
DialogService的包装器，ExDialog类和方法直接接收打开对话框请求，然后将请求传递给DialogService。 -
dialog.service.ts：
DialogService类创建DialogHostComponent的实例，然后将DialogMainComponent的实例添加到其中。它还充当不同情况下关闭对话框的交换机。 -
dialog-host.Component.ts：
DialogHostComponent类创建、缓存和移除DialogMainComponent的实例和传递的DialogComponent的派生实例，或多个实例。渲染时，该组件与对话框的最顶层 DOM 元素相关联。 -
dialog-main.Component.ts：
DialogMainComponent类是一个用于单个对话框的不可见容器。它处理对话框的许多选项和设置，例如背景叠加、动画、可拖动、点击外部关闭对话框等。渲染时，它与对话框宿主和单个可见对话框元素之间的 DOM 元素相关联。 -
dialog.component.ts：
DialogComponentabstract类处理所有对话框参数类型定义和值转换。它还参与基于条件和回调关闭对话框的过程。预定义的BasicDialogComponent类及其模板和任何自定义对话框组件都继承自基本DialogComponent。任何此类用于对话框内容的派生组件都从起始ExDialog服务传递到DialogMainComponent，实际的对话框内容将附加到该组件。任何从DialogComponent派生的组件，在渲染时，都与实际可见对话框的 DOM 元素相关联。
基本用例示例
ngex-dialog 使用内置的 BasicDialogComponent 及其 HTML 模板来处理简单的消息或确认对话框。
注意：当您使用下载的源代码运行示例应用程序时，URL 可能与下面或其他屏幕截图所示的 URL 不同。
只打开一个带有必填正文文本的信息消息对话框
this.exDialog.openMessage("This is called from a simple line of parameters.");
只打开一个带有必填消息文本的警告消息对话框
this.exDialog.openMessage
("This is called from a simple line of parameters.", "Warning", "warning");
打开一个没有图标和灰色背景的普通对话框
this.exDialog.openMessage({
title: "No Icon, No Gray",
//icon property needs to be here to overwrite default value. It can be "".
icon: "none",
message: "This is called by passing a parameter object",
grayBackground: false
});
只打开一个带有必填正文文本的确认对话框
this.exDialog.openConfirm("Would you like to close the dialog and open another one?")
.subscribe((result) => {
if (result) {
this.exDialog.openMessage("This is another dialog.");
}
});
打开一个禁用动画和拖动功能的消息对话框
注意：动画和拖动功能默认对所有对话框启用。
this.exDialog.openMessage({
message: "Animation and drag-move disabled.",
animation: false,
draggable: false
});
对话框显示所有默认标题、图标和按钮，但没有动画和拖动效果。您可以通过点击演示页面上的“不带动画和拖动的对话框”链接查看结果。
打开自定义数据表单对话框
this.exDialog.openPrime(ProductComponent, {
width: '40%'
});
在这种情况下，ngex-dialog 提供了对话框的主要框架功能。所有内容和页面-对话框通信过程都在指定的 ProductComponent 及其模板中定义，包括操作和关闭按钮，以及所有内容样式。这将使开发人员更灵活地设计和实现数据表单及其操作。
当使用包含自定义内容（尤其是动态加载的数据列表项）的对话框时，对话框元素的高度是不可预测的，这可能导致对话框垂直对齐问题。alignment.directive.ts 中有条件计算逻辑来处理大多数情况并以理想位置显示对话框（如果感兴趣，请参阅文件中的编码细节）。您还可以通过在调用参数列表中指定 topOffset 像素值来微调对话框的顶部对齐。默认的 topOffset 值为 50。尝试使用您自己的值以获得最佳垂直对齐外观。
this.exDialog.openPrime(ProductComponent, {
width: '40%',
topOffset: 30
});
您可以在这些链接中看到更多使用自定义数据表单和 PDF Viewer IFrame 与对话框的示例
HTML 模板
ngex-dialog 中内置的消息和确认类型对话框模板通常能满足最常见的需求。HTML 模板代码嵌入在 basic-dialog.component.ts 文件中。
@Component({
selector: 'basic-dialog',
template: `<div class="dialog-content" #dialogElem>
<div class="dialog-header" #headerElem>
- - -
</div>
<div class="dialog-body" #bodyElem>
- - -
</div>
<div class="dialog-buttons dialog-footer" #footerElem>
- - -
</div>
</div>`
})
主题和样式甚至可以使用调用应用程序端的 ang-content/src/assets/cssex-dialog.css 文件中的设置进行自定义。Angular CLI 将根据构建配置捆绑所有 css 文件以供输出。由于代码和结构与 npm 库包版本兼容，以前在组件级别的 HTML 模板和 CSS 文件已从更新中删除。
如果您需要修改基本对话框模板或向其中添加新元素，您可以使用 ngex-dialog 的源代码版本（而不是 npm 库包版本），然后对 basic-dialog.component.ts 文件中的 HTML 模板部分进行更改。您甚至可以将自己的组件级 basic-dialog.component.html 和 basic-dialog.component.css 作为 basic-dialog.component.ts 的伴侣添加到 ngex-dialog 目录中。
对于除基本消息或确认对话框之外的任何类型，例如数据表单对话框，都应创建具有自定义对话框组件类的特定 HTML 模板。在这种情况下，对话框使用 ngex-dialog 的核心功能与环境交互。组件的自定义 HTML 模板负责可见对话框区域的内容。因此，任何数据处理、HTML 模板和组件类之间的通信以及对话框的外观都将由您自己的代码处理。
关闭或保持打开对话框
对于多级对话框树，Angular ngex-dialog 总是创建新的对象实例来打开子对话框，从不重用任何父元素资源。默认情况下，它首先关闭父对话框，然后打开其子对话框。它还提供选项，在显示子对话框时，将任意级别的父对话框保持在后台打开。启用此功能至少有以下好处：
- 某些依赖进程需要父对话框和子对话框共存，即使是非数据访问对话框也是如此。
- 在需要时，用户可以看到为工作流加载的所有对话框。
- 可以避免由于对话框转换而引起的混洗和闪烁视觉效果。
可以使用将保持打开的对话框的输入参数对象属性启用该选项
this.exDialog.openConfirm({
. . .,
keepOpenForAction: true,
keepOpenForClose: true
});
对于确认类型对话框，keepOpenForAction 用于在点击动作按钮（如 Yes、OK、Go 或 Continue）时保持对话框打开，而 keepOpenForClose 用于点击关闭按钮（如 No 或 Cancel）。对于只有单个 OK、Go 或 Continue 按钮的消息类型对话框，当使用 closeButtonLabel（默认设置）时，keepOpenForClose 可用，或者当使用 actionButtonLabel 时，keepOpenForAction 可用。这比旧版 AngularJS 版本更灵活，在旧版中，任何单按钮对话框只有 closeButtonLabel 和 keepOpenForClose 可用。
在大多数情况下，当使用选项保持父对话框打开时，需要从子对话框中发出同时关闭直接父对话框或关闭所有对话框的命令。
如果也从子对话框的代码中关闭直接父对话框
this.exDialog.openMessage({
. . .,
closeImmediateParent: true
});
如果关闭所有对话框
this.exDialog.openMessage({
. . .,
closeAllDialogs: true
});
现有父对话框始终位于新打开的子对话框后面。如果父对话框的大小小于重叠的子对话框，则可能完全看不到父对话框。由于 ngex-dialog 具有可拖动功能（稍后描述），因此可以将子对话框移开以查看底层的父对话框。
关闭对话框时运行任务
对于对话框，运行任务的命令通常由操作按钮启动。应用程序工作流有时需要在关闭对话框时运行额外的任务，例如取消警告、进一步确认、刷新父页面上的数据或重定向到其他页面。当对话框即将关闭时，有三个选项可用于运行任务。
- 为基本消息、确认或自定义对话框的任何基础屏幕使用自定义回调函数。您可以为输入参数对象属性
beforeCloseCallback指定回调函数let thisRef: any = this; this.exDialog.openConfirm({ actionButtonLabel: "Continue", closeButtonLabel: "Cancel", message: "What next step would you like to take?", beforeCloseCallback: function (value) { var rtnObs = thisRef.exDialog.openConfirm({ message: "Do you really want to cancel it?" }); return rtnObs; } });在响应取消确认时，点击“Yes”按钮将取消工作流并关闭所有弹出屏幕，或者点击“No”按钮将返回到之前的屏幕，保持一切不变。
回调函数可以返回用于嵌套确认对话框的
Observable对象，也可以返回用于任何自定义代码逻辑的布尔值。如果您使用回调函数关闭自定义对话框，返回true将关闭对话框，false将保持对话框打开。您可以在我的Angular Data CRUD文章中查看使用对话框回调函数刷新父数据表的示例。 - 直接从确认对话框使用返回的
Observable结果。通常，我们将取消操作的结果设置为false。可以在“else”代码块中执行其他任务。this.exDialog.openConfirm("Would you like to close the dialog and open another one?") .subscribe((result) => { if (result) { //Test Observable result true. this.exDialog.openMessage("This is another dialog."); } else { //Test Observable result false. //You can run another task here. this.exDialog.openMessage("The dialog has been closed."); } });默认情况下，对关闭对话框的响应任务在对话框关闭后执行。因此，此场景最适用于不返回到前一个父对话框屏幕的工作流。
-
当使用带有自定义模板的任何数据对话框时，您也可以将任何代码逻辑直接放在关闭按钮函数调用中。这种方法非常直接，因为关闭按钮及其属性都在自定义模板中指定。这是数据表单对话框示例中用于取消警告和确认的
cancel()函数代码。cancel() { this.exDialog.openConfirm({ title: "Cancel Warning", icon: "warning", message: "Do you really want to cancel the data editing?", keepOpenForAction: true, keepOpenForClose: true }).subscribe((result) => { if (result) { thisRef.exDialog.openMessage({ title: "Notification", message: "The editing has been cancelled.", closeAllDialogs: true }); } else { thisRef.exDialog.openMessage({ title: "Notification", message: "The editing will continue.", closeImmediateParent: true }); } }); }屏幕截图显示了点击“取消警告”对话框上的“否”按钮时的结果
与使用回调函数不同，此逻辑无法自动触发父页面上的任何调用。您需要使用 Angular 组件交互之间的其中一种方法来根据对话框关闭来执行对话框调用者的操作。
可拖动对话框
可拖动对话框允许用户查看底层页面的任何部分内容，因此是一种用户友好的附加功能。ngex-dialog 完全可拖动，并且能够很好地适应屏幕尺寸调整。可拖动选项默认启用。您可以通过在这些文件中将默认值更改为 false 来禁用整个应用程序的此功能：
- 如果您使用源代码版本，则为 dialog-config.ts 文件
- 如果您使用源代码版或 npm 库包版，则为调用应用程序的 app.config.ts 文件
对于任何单个对话框，您可以通过在参数对象中传递“draggable: false”来禁用它，如前面示例所示。
这里仍然值得一提的是与可拖动对话框相关的一些行为。
-
当为包含输入类型元素的自定义组件的任何对话框启用可拖动时，您需要为每个输入元素指定额外的
(focus)和(blur)事件属性，如 product.component.html 示例所示<input type="text" class="form-control" id="txtProductName" name="txtProductName" [(ngModel)]="model.product.ProductName" required maxlength="50" (focus)="setDrag(true)" (blur)="setDrag(false)" />
这是因为
ngex-dialog中的可拖动指令不会调用mousedown事件的preventDefault()函数，如果调用该函数，则会禁用对话框上的输入字段。但是，在 HTML 默认设置下，当尝试用鼠标高亮显示输入字段中的文本时，整个对话框会移动，导致正常的文本高亮功能失效。因此，在 dialog-cache.ts 中设置了一个全局标志，该标志从这些输入字段接收布尔值，以便在鼠标指针分别位于任何输入字段上和离开任何输入字段时禁用和重新启用拖动操作。在下面的屏幕截图中，当输入字段获得焦点时，对话框无法拖动和移动，以便可以使用鼠标执行文本高亮显示
-
旧版 AngularJS 中拖动对话框和底层页面上选中文本的显示问题已不复存在，即使对话框被拖动并移出窗口边缘。这主要是由于在打开的对话框上的任何输入元素都使用了自定义的
focus-blur指令。当对话框打开时，焦点立即从底层页面或父对话框切换到对话框的元素。然后，根据传递的值，它会自动失去焦点或保持焦点。在示例中，此代码行用于对话框上的第一个按钮。<button type="button" class="close" [focus-blur]="'focus_blur'" (click)="cancel()">×</button>focus-blur.directive.ts 中的逻辑是
if (this.option == "focus" || this.option == "focus_blur") { this.element.nativeElement.focus(); } if (this.option == "blur" || this.option == "focus_blur") { this.element.nativeElement.blur(); } -
如果对话框自打开以来未被拖动，则调整窗口大小将始终使对话框在窗口中重新居中。与旧版 AngularJS 相比，此行为没有改变。对于 Angular
ngex-dialog，如果对话框被拖动，然后窗口大小调整，对话框也会按比例移动到以前的相对位置。此改进主要归因于AlignmentDirective类中用于窗口大小调整的新代码结构和计算。您可以阅读 alignment.directive.ts 中的代码以了解详细信息。将打开的对话框拖动到右下角附近后，减小窗口大小时，对话框仍将位于右下角区域附近，而不会部分或完全超出边缘。
内置模板的自定义样式
可以为具有内置模板的基本消息或确认对话框的元素指定额外的 CSS 类。例如，如果某个特定对话框需要一些不同于默认值的页眉和页脚样式，我们可以将属性 headerAddClass 和 footerAddClass 添加到参数对象，然后创建相应的 CSS 类
exDialog.openMessage({
title: "Look Different",
icon: "none",
message: "Show header and footer in other styles.",
headerAddClass: 'my-dialog-header',
footerAddClass: 'my-dialog-footer'
});
用于添加对话框元素 CSS 类的可用输入参数对象属性的完整列表已在 dialog.component.ts 中编码，并作为注释列在 dialog-config.ts（或调用方 app-config.ts）中。在对话框输入参数对象中，一些用于设置基本对话框 CSS 样式的属性没有默认值。如果您直接使用该工具的源代码版本，并且需要在整个应用程序中使所有对话框具有相同的外观，则可以更改 HTML 模板中的 CSS 类为您自己的类。对于源代码或 npm 库包版本，您还可以在调用应用程序的 ex-dialog.css 中添加您自己的样式或编辑现有样式（如果基本对话框组件和相关上下文需要不同的样式，请参阅 ang-content/src/assets/css/ 文件夹下的 ex-dialog.css 示例）。
使用浏览器导航关闭对话框
在 Angular 编码页面上，任何浏览器重定向到另一个站点都会自动关闭任何打开的对话框。但是，在具有任何历史活动和任何打开对话框的页面上进行前后浏览可能会使当前模态对话框仍显示在重新访问的页面背景上。在旧版 AngularJS 中，我使用 $locationChangeStart 事件处理程序在切换回或切换到其他页面之前关闭任何打开的对话框。为了解决 Angular 中的相同问题，我们首先可以使用路由器的 NavigationEnd 事件处理程序获取旧路由和新路由位置。然后，当路由位置更改时，我们可以调用移除 dialogs 数组中任何现有的缓存对话框组件。添加此代码逻辑的最佳位置是 app.component.ts 文件中 AppComponent 类的 ngOnInit() 方法
ngOnInit() {
let pThis: any = this;
//value[0]: old route; value[1]: new route.
this.router.events.pipe(
filter(value => value instanceof NavigationEnd),
pairwise()
).subscribe((value: any) => {
if (value[1].url != value[0].url) {
//Close any open dialog.
let dialogs: any = pThis.exDialog.getDialogArray();
if (dialogs != undefined && dialogs.length > 0) {
//Pass the last component of array to service.
pThis.exDialog.clearAllDialogs(dialogs[dialogs.length - 1])
}
}
});
}
以下截图展示了解决问题后的浏览器返回操作。
浏览到“第二个示例”页面，在该页面上打开一个对话框，然后点击浏览器后退按钮
对话框自动关闭，进程返回到第一个主页。
摘要
我很荣幸与开发者社区分享 Angular 模态对话框 ngex-dialog 的代码、演示示例项目以及文章中的讨论。尽管完整的示例项目使用 Microsoft ASP.NET MVC 5 或 ASP.NET Core 结构，但该模态对话框工具作为客户端代码适用于任何网站项目。读者可以从这些帖子中看到使用 ngex-dialog 的其他更高级示例
历史
-
2017年3月28日
-
Angular 2 版本的原始帖子
-
-
2017年7月9日
-
为 ASP.NET 5 项目类型添加了示例代码和设置说明
-
-
2017年9月2日
- 添加了 Angular 4 版本的示例代码
- 在文章标题和文本中，将名称“Angular 2”和“Ng2ExDialog”分别更改为“Angular”和“NgExDialog”
-
2018年1月14日
-
更新了 Angular 5 的文章和源代码
-
-
2018年11月22日
- 使用 Angular 6 CLI 更新源代码
- 编辑了某些部分的文本并更改了文章的所有屏幕截图
- 如果需要，Angular 5 的源代码和设置说明可在此处下载：here
-
2019年3月31日
- 使用 Angular 7 CLI 和 Bootstrap 4.3 更新了源代码
- 前两部分的文本也相应进行了编辑
- Angular 6 和 Bootstrap 3.3 的先前源代码可在此处下载：here
-
2019年10月5日
- 使用 Angular 8 CLI 更新源代码
- 添加了检查 Visual Studio 的 TypeScript 版本的说明
- 添加了使用
topOffset值调整垂直对齐 - Angular 7 和 Bootstrap 4.3 的先前源代码可在此处下载：here
-
2020年12月11日
- 使用 Angular 11 CLI 更新源代码
- 使用 ASP.NET Core 5.0 更新了网站项目
- 编辑了部分章节的文章文本以进行更新
- 如果您需要运行以前的 Angular 8、9 或 10 版本的示例应用程序，您可以下载应用程序的 package.json 文件 Package.json_Ng8-9-10.zip，将现有应用程序中的 package.json 文件替换为您想要的版本，然后按照“设置示例应用程序”部分中的说明进行操作。示例应用程序的 Angular 11 源代码与 Angular 8、9 和 10 版本完全兼容，没有重大的破坏性更改。
-
2021年2月15日
- 对
ngex-dialog进行了重大源代码更新，以与 npm 库包版兼容。 - 文章章节和文本根据源代码更新进行了更改。
- 对