天道酬勤,学无止境

mat-dialog

从 DOM 中删除以前的 mat-dialog 的 CSS(Remove previous mat-dialog's CSS from DOM)

问题 我在我的应用程序中使用了两个 mat-dialog 组件,并且都具有 cdk-global-overlay-wrapper 的自定义样式。 这里的问题是,即使在第一个对话框关闭后,它的 CSS 仍然保留在范围内,即在 DOM 内。 因此,第二个对话框中 cdk-global-overlay-wrapper 的样式被第一个对话框覆盖。 请提出一个可能的解决方案。 组件1.css ::ng-deep .cdk-global-overlay-wrapper { pointer-events: none !important; } 组件2.css ::ng-deep .cdk-global-overlay-wrapper { pointer-events: auto !important; }

2021-10-30 21:02:49    分类:技术分享    css   overlay   angular10   mat-dialog

根据对象在 Mat-Dialog 中显示不同的信息?(Display different information in Mat-Dialog depending on object?)

问题 我的项目本质上是在屏幕上显示一堆框。 本质上,每个框都有一个按钮,单击该按钮后,会将您链接到另一个页面。 这是盒子对象。 export interface Allbox { image: string, link: string, button_name: string, info: string; description: string; } {image: 'assets/image.png', link: 'link1.com', button_name: 'B1', info: 'assets/mat-info2.png', description: `this is the description.` }, {image: 'assets/image.png', link: 'link2.com', button_name: 'B2', info: 'assets/mat-info2.png', description: `Some more displaying material.` }, {image: 'assets/image.png', link: 'link3.com', button_name: 'B3', info: 'assets/mat-info2.png', description: `What I want displayed.` }, }

2021-10-30 17:29:46    分类:技术分享    html   angular   typescript   angular-material   mat-dialog

Remove previous mat-dialog's CSS from DOM

I use two mat-dialog components in my application, and both have custom styles for cdk-global-overlay-wrapper. The problem here is, even after the first dialog is closed, its CSS still remains in scope, i.e., within the DOM. Hence, the style for cdk-global-overlay-wrapper from the second dialog gets overridden by the first one. Please suggest a possible solution. component1.css ::ng-deep .cdk-global-overlay-wrapper { pointer-events: none !important; } component2.css ::ng-deep .cdk-global-overlay-wrapper { pointer-events: auto !important; }

2021-10-23 14:55:06    分类:问答    css   overlay   angular10   mat-dialog

Display different information in Mat-Dialog depending on object?

My project is essentially displaying a bunch of boxes on a screen. Essentially, each box holds a button that, when clicked, will link you to another page. This is the box object. export interface Allbox { image: string, link: string, button_name: string, info: string; description: string; } {image: 'assets/image.png', link: 'link1.com', button_name: 'B1', info: 'assets/mat-info2.png', description: `this is the description.` }, {image: 'assets/image.png', link: 'link2.com', button_name: 'B2', info: 'assets/mat-info2.png', description: `Some more displaying material.` }, {image: 'assets/image

2021-09-08 07:20:36    分类:问答    html   angular   typescript   angular-material   mat-dialog