问题标签 [mat-dialog]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
67 浏览

angular - 如何在 Angular 12 中关闭 mat-dialog 后调用函数

我有一个名为ListScheduleComponent它的组件,它有一个打开mat-dialog视图CreateScheduleComponent的功能:

和一个加载所有事件的函数:

所以它看起来像这样:

在此处输入图像描述

现在在我的CreateScheduleComponent我有一个提交功能:

我知道如何关闭此对话框,this.dialogRef.close()但我的问题是,如何调用 getAllEvents(); ListScheduleComponent表单后组件的功能onSubmit()

0 投票
1 回答
35 浏览

angular - 防止在禁用操作按钮单击时关闭对话框

当用户单击禁用的操作按钮时,我想防止关闭对话框。

图书馆:

这是代码,我希望它可以工作,但事实并非如此。尽管该按钮显示为禁用,但当用户单击它时它仍会关闭对话框。

任何线索表示赞赏,谢谢。

0 投票
1 回答
25 浏览

angular - Angular - MatDialog,是否需要取消订阅键盘事件?

当我订阅 angular mat-dialog 时,我需要在关闭对话框后或在其他任何地方取消订阅吗?或者当对话框被破坏时 - GC 还收集它的键盘事件订阅者?

0 投票
1 回答
46 浏览

angular - 角材质:单击从表中删除行后,白色出现在背景中

白色出现在对话框的背景中:

在此处输入图像描述

打字稿:config-referrals.component.ts

0 投票
0 回答
20 浏览

angular - 有没有一种方法可以在现有的 mat-dialog 上创建 mat-dialog?

我想通过单击第一个垫子对话框上的按钮在现有垫子对话框上创建第二个垫子对话框。

虽然第二个垫子对话框正在打开,但它使第二个消失了。

有没有办法可以保留第一个垫子对话框?

创建第一个对话框的功能:

NewTaskComponent 有一个按钮来创建第二个对话框。

创建第二个对话框的函数:

}

0 投票
2 回答
84 浏览

javascript - Angular:组件scss样式不适用于提供给div的[innerHTML]的标签?

我有一个 MatDialog,它在构建时由其父级提供一个 HTML 字符串。HTML 字符串是命名 div 内容的来源,并包含<table>嵌入在 html 中的标签,但由于某种原因,对话框的 scss 文件中定义的表格样式不适用于我指定为的字符串[innerHTML],尽管它适用于<table>标签直接硬编码到html文件中。

有什么方法可以让对话框呈现带有对话框组件样式模板中包含的样式的innerHTML?

HTML:

SCSS:

0 投票
1 回答
64 浏览

angular - 如何将动态数据从可观察对象传递到模态对话框?

我有Observable关于实体状态的信息。我需要在对话框窗口中显示信息(角度材料mat-dialog)。数据源是 Web 套接字,我不确定在用户打开对话框窗口之前是否检索到所有数据。换句话说,我应该根据 observable 更新对话窗口内容

所以我需要了解如何将Observable值作为输入参数传递到 mat 对话框(即作为普通组件输入的异步管道)。

我知道可以使用dialogRef和手动更新data对象,但是对于反应式 anguar 世界来说有点奇怪

0 投票
0 回答
42 浏览

angular - 有没有办法在使用锚标签时使用材料以角度弹出对话框?

这是我的 html 文件。

在 html 文件中有 2 个锚标记。一个用于编辑,另一个用于查看详细信息选项。两者都被重定向到其他编辑和查看组件。但相反,我想在 mat-dialog 弹出窗口上显示编辑和查看选项。请帮忙。

这是我的 ts 文件

这是应用程序路由模块中给出的路由,分别用于添加、编辑和查看用户详细信息。

最后这是服务文件

0 投票
1 回答
86 浏览

angular - Angular 11+ MatDialog:内部组件的 (ngComponentOutlet) html 不会触发

事实上,我在 MatDialog 中嵌入了 ngComponentOutlet 组件时遇到了更多问题。但让我们从这里开始。

我正在建造的东西

我想在 MatDialog 中显示任意组件。我找到了一种方法,但是虽然它适用于 Angular 9(我找到了一个编写示例的版本),但它不适用于 Angular 11(我的项目所基于的版本)或 Angular 13(@latest )。

观察

  • 当内部 HTML 包含 a<button (click)="close()">Close</button>并且我单击按钮时,close()不会触发内部组件的方法
  • close()如果我将它绑定到(mousedown)事件而不是(click);它会触发该方法 可能适用于其他事件,(click)
  • 当我单击按钮时,会重新加载内部组件(请参阅示例中的控制台日志)
  • 当我单击对话框上的任意位置时,内部组件会重新加载(请参阅示例中的控制台日志);在 Angular 9 中不会发生

Angular 9 没有这个问题。我在下面的两个示例中都使用了完全相同的应用程序代码(两个项目都是用 . 创建的ng new,使用不同的ng版本)。

复制示例

stackblitz 病了,如果它打喷嚏 500 秒,请重试几次。可能是 covid ......

破碎的例子(Angular 11)

工作示例(Angular 9)

  • 在 Angular 9 示例中,MatDialog 按预期工作
  • 在 Angular 11 示例中,MatDialog 无法按预期工作
  • 我已经尝试过 Angular 13 (@latest),问题仍然存在

问题

  1. 为什么会这样?
  2. 我该如何解决这个问题?

原始文件 FFR

app.module.ts

app.component.ts

我的-dialog.service.ts

0 投票
0 回答
6 浏览

angular-material - 为什么在构造函数中抛出错误后对话框停止工作?

当对话框组件的构造函数抛出时,我们将永远无法再次打开该对话框。

Stackblitz 示例

对话框构造函数:

调用代码:

测试:

  1. 单击Open Dialog按钮:对话框打开(关闭)
  2. 再次单击Open Dialog按钮:这次构造函数抛出
  3. 再次点击Open Dialog按钮:这次构造函数根本没有被调用

这是一个错误还是预期的?如果是预期的,请解释原因。

注意:
这些情况很少见,因为我们不会故意在构造函数中抛出异常,而是在OnInit()回调中进行初始化工作。但是,如果无论出于何种原因发生这种情况,我不明白为什么下一个公开电话不起作用。