具有高级功能和易于使用特性的Angular 2模式对话框

分享于 

27分钟阅读

Web开发

  繁體

介绍

将web应用程序从 Angular 1.x 升级到 Angular 2涉及到构造和编写进程的过程。 but writing Angular 1.x 模型对话框 NgExDialog 2版本,并创建示例应用程序项目,这是一个有趣的工作。 本文不仅用于共享新模式对话框代码,还提供关于模式对话框的使用和问题解决的讨论。

Ng2ExDialog具有这些特性,这些特性与它的祖先的NgExDialog:::::

  • 易于使用标准化和更简化的调用代码。
  • 灵活且可以定制的基本消息传递和数据显示目的。
  • 对话框可以打开到任何级别,关闭或者保持开放,并与立即关闭,或者关闭所有的。
  • 可以配置为所有选项,如拖动,动画,icon,灰色背景,close-by-click-outside,取消确认等。
  • 可以为每个元素设置主题和样式,例如主对话框。header。标题。icon。消息 body。消息文本。页脚和按钮。
  • 包含所有应用程序,CSS和对话服务的HTML文件的单个文件夹的分发。

以下是为 Ng2ExDialog 列出的所有文件:

Angular 应用程序的主要依赖项都适用于 Ng2ExDialog。 请检查示例项目中的package.json 文件,以查看这些依赖库工具和文件。

设置示例应用程序

下载源由 Visual Studio 2017或者 2015解决方案中的ASP.NET 核心项目组成,用于演示 Ng2ExDialog服务。 如果你将文件夹和文件放置到支持 HTML。CSS。JavaScript和app的任何网站项目中,则由于纯客户端UI编码结构的作用,你可以将它的工作在。

你需要按照以下步骤来使示例应用程序在本地机器上运行。

检查 node.js 和npm的安装。 在 node.js 版本 6.2.2到 6.9.5和npm版本 3.9.5之间创建并测试了示例应用程序。 任何新版本都可以工作,但我没有尝试。

在 Visual Studio> 选项项目和解决方案> ( 仅适用于可视化 Sudio 2017 )的情况下,请确保以为代价: Web包管理> ) 外部Web工具部分,"。node_module。bin"是最顶端和已经选中的项。

如果使用 Visual Studio 2015运行样例应用程序,你需要确认在本地机器上的两个库工具安装了 below。 已经更新且正确版本的这些工具已经可以用于 Visual Studio 2017.

  • 在下载的源代码中,版本1 在 global.json 和 project.json 文件中指定了版本" 1.0.0 -preview2-1-003177"。 尽管你可以更改其他SDK版本,但是版本名称的子文件夹必须位于 C:Program Filesdotnetsdk 目录下。

  • Visual Studio 2015版 2.0.3至 2.1.5的打印。 你可以在没有安装和链接的情况下获得设计时和生成错误,C:Program SDKsTypeScript2.0 ( x86 ) 或者 C:Program 文件( x86 ) Microsoft SDKsTypeScript2.1. 在原始 Visual Studio 2015中安装的TypeScript版本为 1.8.34,这在这里可能无法正常工作。

当首次使用 Visual Studio 打开样例应用程序时,npm将根据 package.json 中的列表自动下载依赖项文件。 文件下载完成并且任务 runner 资源管理器未打开,按键,按键( 或者查看菜单> 其他窗口> 任务 runner 资源管理器) 键,右键单击 copyLibs Explorer然后选择运行。 当 package.json 中的任何引用发生更改时,copyLibs 任务需要手工运行。

按按重新生成解决方案。 所有部署的客户端文件也将自动复制到站点 root,wwwroot 文件夹。

右键单击解决方案资源管理器中的wwwroot> View View View,或者单击工具栏中的IIS IIS start启动样例应用程序。 你可以使用 /javascript/来选择//( 仅 vs 2017 ) Express,在 typescript/javascript代码行中,你可以直接在任意设置断点上启动调试运行会话。 你无需使用浏览器进行客户端代码调试。

对话框访问方案和语法

Ng2ExDialog 是作为 Angular 2服务提供者构建的。 你可以在以后的部分中看到所有的演示案例。 为了在你自己的项目中使用 Ng2ExDialog,你只需执行以下( 也可以在源代码文件中查看详细信息):

  • 将整个 Ng2ExDialog 文件夹复制到你的开发组件位置。
  • 将 below css文件链接添加到你的index.html 文件( 你可以在示例应用程序的 wwwroot文件夹中检查文件以获得参考)。

    <linkrel="stylesheet"href="[location of your bootstrap.css version 3.3.7 file]"><linkrel="stylesheet"href="app/Ng2ExDialog/Css/ex-dialog.css">
  • DialogModule 导入你的app.module.ts。
  • ExDialog ( 服务) 导入你的组件ts文件,该文件调用对话服务。
  • ExDialog 服务实例( 如 ExDialog ) 注入到组件类的构造函数中。

如果只需要默认设置,或者只指定 body 文本。标题或者 icon,则可以使用简单的参数行来打开消息或者确认对话框。

语法:

[[__em__]observable-object] = exDialog.openMessage("body-text", ["title"], ["icon"]);
[observable -object] = exDialog.openConfirm("body-text", ["title"], ["icon"]);

如果需要 body 文本。砖块或者 icon的任何非默认设置,也可以使用参数对象对消息或者确认对话框。

语法:

[[__em__]observable-object] = exDialog.openMessage(parameter-object);
[observable-object] = exDialog.openConfirm(parameter-object);

当调用任何自定义或者数据加载对话框时,需要将自定义对话框组件的NAME 与所需属性的参数对象一起传递。

语法:

[[__em__]observable-object] = exDialog.openPrime(custom-component-name, parameter-object);

对于参数对象,除消息文本之外的所有属性都是可选的。 属性的默认值在 dialog.config.ts 文件中设置。 你还可以查看这里文件中的所有可用属性名和 dialog.component.ts 文件。 如果每个属性项不是自解释的,则总是对它的进行描述。

Dialog核心服务和组件概述

本文主要讨论 Ng2ExDialog的使用和问题解决。 对于那些对对话框内部结构和代码感兴趣的人,可以在示例应用程序的Ng2ExDialog 文件夹中查看这些文件。 列出 below 是主要对话框服务和组件的角色和工作流概要,用于你的参考。

  • :作为 DialogService的包装器,ExDialog 类和方法直接接收打开的对话框请求,然后将请求传递给请求。

  • system - dialog.service.ts: DialogService 类创建实例,DialogMainComponent的实例在其中添加。 它也充当不同情况下关闭对话框的切换面板。

  • system - DialogHostComponent dialog-host.Component.ts: 类创建。缓存和删除 DialogMainComponent的并传递派生实例或者多个实例。 呈现时,组件与对话框的最顶部DOM元素相关。

  • dialog-main.Component.ts: DialogMainComponent 类是单个对话框的不可见容器。 对话框可以处理对话框的许多选项和设置,如背景叠加。动画。可以拖动。关闭对话框。当渲染时。等等 与对话框主机和单个可见对话框元素之间的DOM元素。

  • dialog.component.ts: DialogComponent 抽象类处理所有对话参数类型定义和值转换。 它还参与了基于条件和回调的关闭对话框的过程。 预先定义的BasicDialogComponent 类及其模板和任何自定义对话框组件都继承自基 DialogComponent。 对话框内容的任何这样的派生组件都从启动 ExDialog 服务传递到它的中添加实际对话框内容的DialogMainComponent。 从 DialogComponent 派生的任何组件都与实际可见对话框的DOM元素相关。

基本用例示例

Ng2ExDialog 使用内置的BasicDialogComponent,它的HTML模板用于简单的消息或者确认对话框。

仅使用所需的body 文本打开信息消息对话框:

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");

在没有 icon 和灰色背景的情况下打开一个普通对话框:

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});

仅使用所需的body 文本打开确认对话框:

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});

对话框显示所有默认标题,icon 和按钮,但没有动画和可以拖动效果。 你可以通过点击对话框中没有动画和拖拽链接来查看结果。

打开自定义数据窗体对话框:

this.exDialog.openPrime(ProductComponent, {
 width: '450px' 
});

在这种情况下,Ng2ExDialog 提供了对话框的主框架特性。 所有内容和页对话框通信流程都在指定的ProductComponent 中定义,包括动作和关闭按钮和所有内容样式。 这对于开发人员设计和实现数据表单及其操作更为灵活。

HTML 模板&H

内置的模板在 Ng2ExDialog消息和确认类型的对话框通常满足最常见使用的需要。 主题和样式甚至可以在单个元素级别定制。 如果需要修改或者添加新元素,可以在 basic-dialog.component.html。basic-dialog.component.css 和 basic-dialog.component.ts 文件中进行修改。

对于基本消息或者确认对话框以外的任何类型,应该创建具有自定义对话框组件类的特定HTML模板,如数据表单对话框。 在这个场景中,对话框使用的核心特性与环境交互。 组件的自定义HTML模板负责可见对话框区域的内容。 因此,任何数据处理。HTML模板与组件类之间的通信,以及对话框的look-and-feel都将由你自己的代码处理。

可以自动解析为组件的templateUrl 指定的任何HTML模板的relative URL,因为在 @Component 装饰中设置 NodeModuleid 属性是可以自动解决的。 这是 Angular 2的一个很好的特性。 例如在实际的文件中,我们只需要将 basic-dialog.component.html 插件物理部署到文件夹,而只需将 templateUrl 设置为当前的relative 路径。

@Component({
 moduleId: module.id,
 selector: 'basic-dialog',
 templateUrl: "./basic-dialog.component.html",
 styleUrls: ["./basic-dialog.component.css"] 
})

关闭或者保持打开对话框

Ng2ExDialog 在多层次对话框树中,总是创建新的对象实例来打开子对话框,从不使用任何父元素资源。 默认情况下,它首先关闭父对话框,然后打开它的子。 它还提供了在显示子对话框时在 background 上打开任何级别的父对话框的选项。 在启用这里功能时,至少有以下好处:

  • 某些依赖进程需要同时存在父对话和子对话,即使对non-data-access对话框也是如此。
  • 当需要时,用户可以看到为工作流加载的所有对话框。
  • 可以避免由于对话转换而产生的切换和闪烁视觉效果。

可以使用对话框的输入参数对象属性启用该选项,该对话框将保持打开状态:

this.exDialog.openConfirm({
. . . , 
 keepOpenForAction: true,
 keepOpenForClose: true});

如果你是管理员,请点击关闭按钮,然后按 yes Cancel Cancel Cancel Cancel Cancel Cancel Cancel。 for只有 single ok ok或者按alt继续按钮,keepOpenForClose 在使用 closeButtonLabel 时可用,如果使用 actionButtonLabel,则使用。 对于 Angular 1.x NgExDialog,只有 closeButtonLabelkeepOpenForClose 可以用于任何单个按钮对话框。

在大多数情况下,当使用选项保持父对话框打开时,也需要在子对话框中关闭直接关闭父对话框或者关闭所有对话框的命令。

如果同时关闭子对话框的代码中的直接父级,请执行以下操作:

this.exDialog.openMessage({
. . . , 
 closeImmediateParent: true});

如果关闭所有对话框:

this.exDialog.openMessage({
. . . , 
 closeAllDialogs: true});

exists父对话框始终是新打开的子对话框。 如果父对话框的大小小于重叠子对话框,则可能根本看不到父对话框。 由于 Ng2ExDialog具有可以拖动特性,所以可以将子对话框移到一旁以查看底层父对话框。

关闭对话框时运行任务

对于对话框,运行任务的命令通常从操作按钮启动。 在关闭对话框,进一步确认或者重定向到其他页面时,应用程序工作流有时可能需要运行其他任务,例如取消警告。 有三个选项可以用于在对话框即将关闭时运行任务。

  • 对基本消息或者确认对话框的任何基本屏幕使用自定义回调函数。 你可以为输入参数对象属性 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;
 }
}); 

在点击 cancel yes按钮后,当单击 yes 按钮,或者单击 no button按钮时,将取消工作流程。

  • 使用确认对话框中返回的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.");
 }
});

默认情况下,在关闭对话框的情况下运行的任务在关闭对话框之后发生。 因此,该场景最好用于未返回到上一个父对话框屏幕的工作流。

直接从关闭按钮函数调用打开确认对话框,对带有自定义模板的任何数据对话框进行调用。 这种方法非常简单,因为关闭按钮及其属性是在定制模板中指定的。 下面是 data dialog中的cancel警告和确认 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 });
 }
 });
}

屏幕截图显示了在取消警告对话框中单击 no按钮时的结果:

可以拖动对话框

用户友好的对话框允许用户观察底层页面内容的任何部分,因此是用户友好的add-on。 Ng2ExDialog 完全可以拖动,并且很适合屏幕调整大小。 默认情况下设置可以拖动选项。 如果将默认值更改为 false,则可以通过将默认值更改为,或者将参数对象中的" draggable: false"作为示例传递给其他对话框,从而关闭整个应用程序中的这里特性。

尽管 Ng2ExDialog的问题似乎小于 Angular 1.x 版本,但是在这里仍然值得注意的一些行为仍然值得关注。

当启用包含输入类型元素的自定义组件的任何对话框时,你需要为每个输入元素指定附加的(focus)(blur) 事件属性,如 product.component.html 示例所示:

<inputtype="text"class="form-control"id="txtProductName"name="txtProductName"[(ngModel)]="model.product.ProductName"requiredmaxlength="50"(focus)="setDrag(true)"(blur)="setDrag(false)"/>

This 中的draggable指令不调用mousedown事件的preventDefault() 函数,如果调用,则禁用对话框中的输入字段。 如果你想要将文本设置为默认的文本,那么整个对话框将导致正常的文本功能失败,这将导致HTML默认的设置。 ,在 dialog-cache.ts 设置全局标志that在鼠标点打开和关闭任何输入字段时,接收这些输入字段的布尔值以禁用和启用拖动操作。

在 below 屏幕截图中,当输入字段被聚焦时无法拖动和移动对话框,以便可以执行鼠标高亮显示:

在 Angular 1.x 版本中,所选的对话框和底层页面上没有选择的显示文本,即使对话框被拖动并移出窗口。 这主要是由于使用了自定义 focus-blur 指令,该指令放置在打开对话框中的任何输入元素。 当对话框打开时,将焦点立即切换到对话框或者父对话框的对话框元素。 然后,根据所传递的值自动地退出或者保持焦点。 在此示例中,这里代码行用于对话框的第一个按钮。

<buttontype="button"class="close"[focus-blur]="'focus_blur'"(click)="cancel()">&times;</button>

focus-blur.directive.ts 中的逻辑是:

if (this.option == "focus" || this.option == "focus_blur") {
 this.renderer.invokeElementMethod(this.element.nativeElement, 'focus');
}if (this.option == "blur" || this.option == "focus_blur") {
 this.renderer.invokeElementMethod(this.element.nativeElement, 'blur');
}

如果对话框未被拖动,则窗口的调整大小将始终重新中心对话框中的对话框。 Angular 1.x 版本相比,这里行为不会发生更改。 如果将对话框拖动到新的位置,则将这里对话框按比例移动,同时,对话框也会按比例移动到以前的位置位置。 这种改进主要是由于 VerticalCenterDirective 类中的窗口调整了新的代码结构和计算。 你可以阅读 vertical-center.directive.ts 中的代码。

将打开的对话框拖到右下角后,将窗口缩小到右下角,而不是部分或者完全偏离边缘。

内置模板的自定义样式

可以为基本消息或者确认对话框元素指定其他CSS类,并在模板中使用生成。 例如,如果某个对话框需要除默认值外的header 和页脚样式,可以将属性。headerAddClassfooterAddClass 添加到参数对象中。

exDialog.openMessage({
 title: "Look Different",
 icon: "none",
 message: "Show header and footer in other styles.", 
 headerAddClass: 'my-dialog-header',
 footerAddClass: 'my-dialog-footer'});

dialog-config.ts 中列出的对话框元素的可用输入参数对象属性的完整列表和 dialog.component.ts 文件中列出。 对话框输入参数对象中,设置基本对话框CSS样式的一些属性没有默认值。 如果需要使所有对话框在整个应用程序中都相同的look-and-feel,你可以在HTML模板中将CSS类直接更改为你自己的类。

使用浏览器导航关闭对话框

在角编码页上,任何浏览器重定向到其他站点将自动关闭任何打开的对话框。 但是,在具有历史活动和任何打开对话框的页面上浏览和前进可以保持当前模式对话框仍然显示在访问的页面背景上。 在 Angular 1.x 版本中,我使用 $locationChangeStart 事件处理程序关闭任何打开的对话框,然后重新切换到它的他页。 为了解决 Angular 2中的相同问题,我们首先使用路由器 NavigatoinEnd 处理器获得旧的路由位置。 然后我们可以调用 dialogs array 中的任何现有缓存对话框组件,当路由位置改变时。 在 app.component.ts 文件中,添加这里代码逻辑的最佳位置是 AppComponent 类的构造函数:

constructor(private router: Router, private exDialog: ExDialog) {
 //value[0]: old route; value[1]: new route.this.router.events.filter(value =>value instanceof NavigationEnd)
. pairwise().subscribe((value) => {
 if (value[1].url!= value[0].url) {
 //Close any open dialog.let dialogs = this.exDialog.getDialogArray();
 if (dialogs!= undefined && dialogs.length >0) {
 //Pass the last component of array to service.this.exDialog.clearAllDialogs(dialogs[dialogs.length - 1])
 }
 } 
 });
} 

below 截图说明了浏览器对已经解决问题的后退操作。

浏览第二个示例页时,打开该网页上的对话框,然后单击浏览器上一步按钮:

对话框自动关闭,进程将返回到第一个主页面:

摘要

我乐于与开发者社区分享 Angular 2模态对话框。 Ng2ExDialog插件。演示示例项目和文章中的代码。 如果完整示例项目使用示例项目中的所有文件,但完整示例项目使用 Microsoft ASP.NET 核心 1.0结构,则模态对话框工具可以在任何网站项目上工作。 Ng2ExDialog 或者演示应用程序是用高质量和真实世界场景构建的。 由于 Angular 2 web应用程序对其他库和工具具有高依赖性,因此访问者可能会在第一次运行示例应用程序时遇到一些。 但是,如果按照设置示例应用程序部分中的说明,代码应该正常工作。 希望开发人员喜欢 Ng2ExDialog。 欢迎任何反馈。


USE  angular  FUNC  函数  feature  DIA  
相关文章