问题标签 [mddialog]

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 投票
2 回答
185 浏览

webpack - 为什么没有包含我的 mdDialog 组件的 SCSS 文件?

我有一个相当基本的Angular Material 对话框组件,可以向用户传递消息:

我正在尝试设置内部工具栏的样式,因此我包含了父组件的 SCSS 文件,如上所示。但是,它没有被应用。构建是通过 Webpack/Angular-CLI。

SCSS 文件包含纯 CSS,并正确包含在使用相同路径调用对话框的组件中:

我还尝试将对话框样式分解为它们自己的文件,并通过styles组件直接注入样式。

对话框是否接受 CSS 文件,如果接受,为什么它对我不起作用?

0 投票
2 回答
577 浏览

css - 什么范围的 CSS 选择器允许我覆盖 mdDialog 容器宽度?

给定一个典型的 Angular Material 对话框,它的最大宽度设置为 80vw .mat-dialog-container,我如何制定一个选择器来覆盖它?我想要一个真正的全角对话框。

问题在于范围——Angular-CLI 使用范围属性选择器编译组件 CSS。

因此,这:

变成:

然而,这个特定的元素似乎没有附加到任何组件上——它没有动态生成的属性。

在此处输入图像描述

我尝试在对话框样式表和宿主组件的样式表中进行覆盖,但均未成功。

角度特殊选择器

对话框 Plunkr


让我再尝试一次。我没有很好地解释这个问题。

假设我将它添加到我的主机组件样式表中:

我有一个构建手表正在运行,所以应用程序被重新编译。CSS 输出现在是这样的:

但是,该元素实际上并没有该属性_ngcontent-c6。该属性应用于 . 的祖先的兄弟姐妹内部的其他元素.mat-dialog-container。选择器是错误的。

如果我将该 CSS 添加到对话框组件的样式表中,则会发生类似的事情,但属性 ID 不同。

0 投票
1 回答
3876 浏览

angular - Angular 4 - 在对话框中将变量从子级传递给父级?

我有一个父组件,它在对话框中打开一个子组件:

如何使用在子组件中定义和使用/修改的变量传递给父组件?

0 投票
1 回答
1731 浏览

angularjs - 如何在 ng-click 的自定义指令中打开 mdDialog?

我试图在模板中获取 ng-click 以在自定义指令中打开模式,同时将一些表单参数发送到 diretives 控制器,然后调用服务。我把它放在一个plunker中,但我显然无法从 ng-click 获得指令。

我以为我可以只使用 $scope 而不是隔离范围,但我不确定这样的结构是否正确。我必须尝试将所有这些都变成一个组件,这就是我使用自定义指令的原因。

我见过很多类似的事情,但不完全是我想要做的。关于如何做到这一点的正确结构以及我在这里做错了什么的任何想法?

这是我到目前为止的代码:

索引.html

我的对话

脚本.js

0 投票
1 回答
972 浏览

javascript - 通过触发对话框覆盖的函数在 Angular 组件之间传递值

在我的 Angular 应用程序中,我有一个带有打开对话框覆盖的功能的组件。我试图弄清楚如何将一些数据从原始组件传递到这个对话框组件(EnrollingProcessComponent)。这不是父子关系,所以我不能在这里使用 Input() 或 [] 绑定。

此外,由于多个实例可能会导致问题,我不会在这里讨论,我们没有使用服务来获取和共享组件之间的数据。所以我也不能注入服务来在对话框组件(EnrollingProcessComponent)中获取相同的实例。

所以,综上所述,我需要以某种方式将这些数据(只是一个电子邮件地址)从原始组件传递到对话组件。我假设我应该能够通过将它作为参数传递来做到这一点,但到目前为止我无法让它工作(即,当我控制台输出原始组件中的值时,我得到了值。但是当在对话框(EnrollingProcessComponent)组件中安慰该值,我得到“未定义”)。

我使用 click() 事件打开对话框组件:

触发的函数如下所示:

如何将 getPrimaryContactEmail() 的结果(一个电子邮件地址)从原始组件传递到对话框打开时触发的组件?

0 投票
0 回答
219 浏览

angular - Angular4 异步管道正在失去观察者对 mdDialog 的引用

假设我有一个名为的组件FooComponent,并且在 html 模板中有一个使用 async pipe 的元素[data]="messageService.messages | async"

MessageService中,属性messages是一个 BehaviorSubject:

FooComponentI can open amdDialog中,在此对话框MessageService中调用了一个函数,该函数正在更改主题行为的值:

问题是,关闭对话框后,在 的函数Subject.prototype.next(value)SubjectBehaviorFooComponent不再是观察者。

我知道 aync 管道通过取消订阅组件销毁来防止内存泄漏,但打开对话框不会破坏FooComponent......

为什么我失去了观察者参考?

0 投票
1 回答
122 浏览

angular - Header 组件打开 MdDialog 但需要 MdDialog 发出事件来告诉 Header 关闭 MdDialg

我的应用程序中有一个带有下拉菜单的标题。当您单击“电子邮件”时,会弹出一个 MdDialog,因为我有 this.dialog.open(EmailDialogComponent)。效果很好!现在我需要单击 MdDialog 右上角的 X,它应该发出一个事件,标题模板可以监听然后运行

this.dialog.closeAll()

我试图在 EmailDialogComponent 的模板上收听事件,但它仍然没有“听到事件”。

我有@Outup closeDialog = new EventEmitter(); 然后我在 X 上有 (click)="closeEmailDialog()"。closeEmailDialog 是这个 closeEmailDialog() { this.closeDialog.emit(null); }

但这行不通。即使我在 MdDialog 模板上收听事件,它似乎也没有触发 - 有什么想法吗?

0 投票
3 回答
28697 浏览

angular - 从 Angular Material 2 中的 MdDialog 返回数据

我正在使用 MdDialogModule 来显示一个对话框窗口,其中包含一个输入字段。模态打开正常,我可以在输入字段中输入文本并提交,但是在单击提交按钮时,我希望输入表单中的数据返回到调用对话框组件的主组件并关闭对话框.

我该怎么做呢?我能够将数据传递给 MdDialog 组件,但没有找到任何有关如何从 MdDialogComponent 向组件返回数据的资源。

我的 Dialog 组件代码如下所示

主组件中调用对话框的方法如下所示。现在没有返回响应,它返回未定义,因为我还没有弄清楚。

0 投票
1 回答
262 浏览

angularjs - Angular mdDialog 控制器代码在缩小时失败

我成功地添加了一个自定义模板mdDialog来请求一个名称和一个布尔(来自复选框)对话框,该对话框在单击元素时弹出。

然而,虽然它在开发中运行良好,但在生产中却失败了,因为构建过程会缩小 js 代码。我在 SO 中找到了很多关于这个问题的例子,但没有一个例子能强调如何解决我的问题,在大多数情况下,它是一个解决方案或一些容易掌握的东西。我的代码是:

关于是什么破坏了这里的缩小的任何想法?谢谢!

0 投票
3 回答
8770 浏览

angular - 在它的 component.ts 中关闭 md-dialog

我有一个 md-dialog 组件 -DialogComponent我从兄弟组件打开它SiblingComponent- 我想 dialog.component.ts在一些操作后将其关闭。

DialogComponent基本上是一个带有提交按钮的表单,提交表单将我带到dialog.component.ts我正在做一些验证并将数据发送到服务的地方。

验证通过并发送数据后,我想做一些超时,然后自动关闭拨号窗口,但我不知道如何运行类似md-dialog-closeindialog.component.ts