使用CDK/Overlay创建附加到元素的小对话框
使用CDK/Overlay创建附加到元素的小对话框是一种常见的前端开发技术，它可以在网页中实现弹出式的对话框或浮动窗口。CDK是Angular框架提供的一组工具，用于构建可重用的组件和交互式UI。
CDK/Overlay是CDK中的一个模块，它提供了一种简单而灵活的方式来创建和管理浮动窗口。通过使用Overlay模块，开发人员可以轻松地在网页中创建小对话框，并将其附加到指定的元素上。
优势：
- 灵活性：CDK/Overlay提供了丰富的API和配置选项，使开发人员能够根据需求自定义对话框的外观和行为。
- 可重用性：CDK/Overlay可以轻松地应用于不同的项目和场景中，使得对话框的创建和管理变得更加高效和可维护。
- 兼容性：CDK/Overlay可以与Angular框架无缝集成，同时也可以与其他前端框架和库一起使用。
应用场景：
- 提示框：可以使用CDK/Overlay创建简单的提示框，用于显示一些提示信息或警告。
- 模态框：CDK/Overlay可以用于创建模态框，用于显示需要用户交互的内容，例如表单填写、确认对话框等。
- 下拉菜单：通过CDK/Overlay，可以实现自定义的下拉菜单，用于显示更多选项或操作。
推荐的腾讯云相关产品： 腾讯云提供了一系列与云计算相关的产品，以下是一些推荐的产品：
- 云服务器（CVM）：提供弹性的虚拟服务器实例，可用于部署和运行应用程序。
- 云数据库MySQL版（CDB）：提供高可用性和可扩展性的关系型数据库服务，适用于存储和管理应用程序的数据。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储和管理大规模的非结构化数据。
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和工具，帮助开发人员构建和训练自己的机器学习模型。
更多腾讯云产品信息和介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
2回答
臭虫：
Z-索引不适用于材料对话框
预期的行为是什么？
Z-索引应该在材料对话框上工作，或者对话框应该在所有其他内容之上。
目前的行为是什么？
材料对话框包含在下面的select选项中。
复制的步骤是什么？
输入文本。
选择下拉。
截图：
还有什么我们应该知道的吗？
试用CSS修补程序：
.modal__content,dialog-layout,mat-dialog-container,.mat-dialog-container,#cdk-overlay-0,.cdk-overlay-pane {
z-index: 9999 !important;
}
这些都不管用。
浏览 1提问于2018-10-18得票数 5
我有两个组件(每个组件一个对话框)，我想有一个不透明度为0的对话框和另一个不透明度为1的对话框。我使用的是：
::ng-deep {
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: 0;
}
但它也会影响另一个mat对话框。我能做什么?
浏览 5提问于2021-05-14得票数 0
2回答
我发现在全局css文件中设置的解决方案：
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 10000;
}
破坏其他对话框窗口(例如，在MatDatepicker后面显示在MatDialog中的表单中使用的the )。在本地设置它似乎没有任何效果，根据本文更改视图封装：仍然会破坏其他对话框窗口(与全局设置样式相同)。我还能用别的方法实现吗？
编辑：
例如stackblitz，选择选项甚至不显示：
浏览 0提问于2019-06-03得票数 0
回答已采纳
1回答
我在一个mat-select中显示一个ngx-smart-dialog，当我打开select时，它会显示在对话框后面。我找到了这个解决方案的和：
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 9999!important;
}
如果我把它放到全局.scss文件中，这就解决了这个问题。我想知道的是(因为在我读到的内容中，我没有找到解释)为什么把它放在组件的视图中(即模态组件的视图)--它不工作。
提前感谢！
浏览 0提问于2019-01-05得票数 1
回答已采纳
我在角材料中有fixed header和z-index of 1100的位置。
虽然我的站点中有一些mat-menu，它将头与z-index:1200重叠，并且有类cdk-overlay-container (角材料类)，这是默认行为。
要覆盖这一点，我只需将cdk-overlay-container z-index缩小为1000，这样它就可以在fixed header之后，所有事情对我都好了。
问题
但是，当我打开使用相同cdk-overlay-container和相同z-index的材料对话框时，它会显示我固定的标题，因为它的z-index很高，所以任何知道如何通过向cdk-overlay
浏览 7提问于2019-10-15得票数 4
回答已采纳
我想使用Angular Material对话框并覆盖一些样式，而不是在我的CSS中使用"!important“。
Angular Material以如下的内联样式注入cdk-overlay-pane：
<div id="cdk-overlay-0" class="cdk-overlay-pane" style="max-width:80vw; pointer-events: auto; position: static;">
有没有可能配置Angular材质，使其不添加这些内联样式？
浏览 0提问于2018-12-07得票数 2
看起来，席特选择消失在模特儿后面和对话背后，这两个问题都已经被多次解决了。
.cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 9999!important; }
在全球styles.scss中。
我已经在我的申请中成功地实施了这个建议，当我在一个模态中有一个垫子选择时：
但是，当我试图在一个模式中的对话框中有一个mat-select时，mat-select菜单会出现在模式的上方，但在对话框的后面：
任何建议都非常受欢迎和非常感谢。如果人们认为这是合理的，我将尝试创建一个最小的可重复的示例，但是如
浏览 0提问于2019-11-03得票数 3
回答已采纳
我试着在重定位策略中为对话框做一个滚动，但它对我不起作用。
const scrollStrategy = this.overlay.scrollStrategies.reposition();
const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } );
我希望在滚动过程中整个对话框(元素.cdk-overlay-pane)都会移动
浏览 0提问于2018-04-04得票数 37
1回答
星云对话比对
、、、、
正如标题所示，我目前正在与的角度进行斗争。默认情况下，它是居中的，我希望它直接对齐到我屏幕的右边。
在googling了很长一段时间之后，我尝试的是调用component.ts中的对话框，如下所示：
this.dialogRef = this.dialogService.open(this.noteDialog, { dialogClass: 'stick-right' });
然后在我的themes.scss中添加一些scss
.stick-right {
display: flex !important;
justify-content: flex-end !imp
浏览 26提问于2022-01-11得票数 0
回答已采纳
由于某种原因，在角9中，将CDK拖动到mat对话框标题div上，它将使整个对话框可拖动。这将阻止用户在对话框中选择文本。
在角7中，只能通过实际拖动放置cdk拖动属性的div来拖动对话框。
是否有任何方法使拖动行动只发生在标题的垫对话角9？
<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
<mat-icon>drag_handle</mat-icon>
{{title}}
</h1>
<div m
浏览 2提问于2020-05-08得票数 1
回答已采纳
1回答
是否可以在屏幕中间自动设置材料对话框窗口？当我打开对话框窗口时，窗口在左上角。我注意到，我可以使用css类手动更改窗口的位置：.cdk-overlay-container，如下所示：
.cdk-overlay-container {
margin: 200px 0 0 0;
}
有可能自动生成吗？不幸的是，margin: auto不起作用。
浏览 2提问于2018-10-13得票数 0
2回答
Angular material为各种组件创建覆盖容器，如菜单、快捷栏和对话框组件。
如何以一种简单的方式决定应该将cdk-overlay-container附加到哪个元素？
目前，它被附加到body元素中。因此，如果我触发了除body元素以外的任何其他元素的全屏模式，它将不会被看到。当然这不是我想要的。
浏览 17提问于2018-12-20得票数 3
回答已采纳
1回答
我已经有了一个方法，当它们有一些信息时，它会验证它，但是当没有信息时，它就崩溃了
Cypress.Commands.add('selectedFilterPlan', (filterId, idComponentList) => {
cy.get(filterId).should('be.visible');
cy.get(filterId).should('have.value', '');
cy.get(filterId)
.then((selects) => {
let select =
浏览 41提问于2021-02-20得票数 0
我在我的angular项目中使用了和。我想改变mat-menu的位置。此外，我还使用以下代码片段添加到.scss文件中。
::ng-deep .cdk-overlay-pane {
transform: translate(78%, 10%);
}
但是，这也会导致我对话框面板位置发生变化。我向mat-menu添加了类，并尝试做同样的事情，结果没有什么不同。
<mat-menu #menu="matMenu" class="kebab-mat-menu" >
<button mat-menu-
浏览 1提问于2021-06-09得票数 0
1回答
我有一个html页面，用于将数据发送到服务器，我需要选择特定的按钮来实现作业的自动化。
<div id="cdk-overlay-17" class="cdk-overlay-pane" style="max-width: position: static;">
<div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
<mat-dialog-container
浏览 0提问于2020-03-28得票数 0
回答已采纳
我已经做了一个角形6应用程序，我有一些MatDialog。这在开发模式下工作得很好。
现在，我必须将其实现到一个现有的网站中(使用sitecore 9)。这很好，只是对话框不能正确打开。我发现对话框被添加到主体中，而不是添加到我的角根DOM元素中。
<html>
<head></head>
<body>
<app-library>...</app-library>
<div class="cdk-overlay-container">...</div>
浏览 0提问于2018-10-11得票数 3
回答已采纳
在我的项目中，我使用了和。在浏览器中运行代码后，当我打开或时，它会将cdk-overlay-container div添加到页面的body中
<div class="cdk-overlay-container"></div>
每次我使用需要覆盖的md2组件时，它都会使用现有的组件。这是正常行为。一旦创建了第一个md2 OverlayContainer，当我打开材质对话框时，我的问题就出现了。不使用现有的OverlayContainer，而是使用材质对话框创建一个新的。这会导致z-index出现一些问题。为什么材质对话框不使用现有的OverlayConta
浏览 56提问于2018-01-04得票数 2
1回答
我正在开发一个角web应用程序，使用：
角4.1.2
角材料2.0.0-β
我正在尝试创建一个简单的模态对话框，在读取角度指南文档()时，我发现有几个指令可以使对话框内容的结构变得更容易。
我不知道如何实现md-dialog-title、<md-dialog-content>、<md-dialog-actions>或md-dialog-close。当将属性应用于元素时，似乎没有任何区别，<md-dialog-content>和<md-dialog-actions>创建的错误如下：
Unhandled Promise rejecti
浏览 7提问于2017-09-30得票数 2
回答已采纳
2回答
我已经这样做了： <div mat-dialog-title
cdkDrag
cdkDragRootElement=".cdk-overlay-pane"
cdkDragHandle>
</div> 但是，通过单击窗口的任意位置，该解决方案会导致对话框是可拖动的，这使得无法在内容块中扩展<textarea>。理想情况下，我需要一种方法，使它可以拖动，只通过点击标题。
浏览 45提问于2020-10-16得票数 2
回答已采纳
1回答
Angular 11.0.2 web应用程序
若要检查是否显示验证消息，或未从下拉列表中选择值时，请单击下拉列表外部的值，但获取ElementNotInteractableException。
在检验员窗口中，当下拉显示时，我无法检查任何元素。在试图检查时获取div.cdk-overlay-backdrop cdk-overlay-transparent-backdrop cdk-overlay-backdrop-showing。
请查找下面的截图相同。
浏览 2提问于2021-11-01得票数 0
回答已采纳
1回答
我在MVC应用程序中添加了角材料。当我加载页面时，我没有看到错误，但出于某种原因，我也没有看到样式。我在package.json文件中添加了必要的依赖项，在Layout.cshtml中添加了指向css主题的链接，在systems.config.js中添加了必要的映射。创建了一个包含所有材料模块的单独material.module.ts。从app.module.ts引用它。从我的site.css文件导入css。增加了材料的内容，但我仍然没有看到造型。我遗漏了什么？
这是我的package.json文件
"dependencies": {
"@angular/ani
浏览 1提问于2018-11-04得票数 0
1回答
您好，我正在使用CDK在一个库中创建我自己的模式对话框。我已经成功地将所有内容连接起来，但对话框显示在文档的底部。
我认为问题出在样式没有正确导入。
我在/src/lib/components/modal/modal.component.css中有以下语句：
@import "~@angular/cdk/overlay-prebuilt.css";
当我构建应用程序并在演示应用程序中使用它时，我看不到元素上应用的样式。我看到的示例是要导入到styles.scss中的样式，它通常假定它是用于应用程序而不是库。我需要为库做一些不同的事情吗？
浏览 0提问于2019-08-01得票数 1
1回答
我的应用程序中的每个对话框或多或少都是这样的：
<custom-dialog-container>
<custom-dialog-header>...</custom-dialog-header>
<custom-dialog-content>
...
</custom-dialog-content>
<custom-button>
...
</custom-button>
</custom-dialog-container>
浏览 2提问于2021-05-31得票数 1
回答已采纳
我试图在Angular组件级别覆盖一些cdk-overlay css，但它不起作用--即使我使用:host ::ng-deep
此处的material select下拉列表(mat-select-content)是cdk-overlay-pane的子项
<div id="cdk-overlay-0" class="cdk-overlay-pane" style="...">
<div class="ng-trigger ng-trigger-transformPanel ng-tns-c19-5 mat-select
浏览 2提问于2018-09-22得票数 1
1回答
我试着把mat-dialog和drag-drop结合在角质材料9上。
dialog.html是：
<h1 mat-dialog-title cdkDrag cdkDragHandle cdkDragRootElement=".cdk-overlay-pane">
Title</h1>
<div>
<p>What's your favorite animal?</p>
</div>
<div mat-dialog-actions>
<button mat-stroked-bu
浏览 3提问于2020-06-05得票数 1
回答已采纳
1回答
角度材料样式问题
、、
我正在尝试为角度材质控件创建一些样式更改。通过阅读Angular材质文档，我意识到这样做的方法是创建一个Sass文件，其中包含一些特定的声明，以便更改主题中使用的颜色。 不幸的是，对于您可以在角度材质控件中更改什么，或者确切地说，您需要更改哪些选择器才能更改特定的内容，有很多不清楚的地方。没有示例说明要在_theming.scss文件中更改哪些内容，也没有示例说明要更改哪些内容，或者在您可以添加的自定义混合中添加哪些内容。 例如:不清楚在哪里更改"primary“的颜色。SCSS文件中有一个条目 $primary: map-get($theme, primary); 但是$them
浏览 15提问于2020-04-19得票数 1
1回答
我正在尝试使用CDK覆盖来添加一个材质微调器，作为特定组件顶部的加载指示器。但是，当我将hasBackdrop设置为true时，整个应用程序将变为灰色并被禁用。我尝试从组件传入viewContainerRef，并使用connectedTo定位。我可以移动微调器的位置，但不能改变被背景禁用的区域。
@Injectable()
export class WaitIndicatorService {
overlayRef: OverlayRef;
constructor(public overlay: Overlay) { }
showSpinner(viewContai
浏览 0提问于2017-11-17得票数 3
1回答
目的
我要把我的对话框拉起来。他们有很多，每一个都是我的自定义指令，设置样式等等。
问题
我想知道是否有一个指令选项可以对该元素应用另一个指令？
代码
我的对话框看起来有点像这样：
<custom-dialog-container>
<custom-dialog-header>...</custom-dialog-header>
<custom-dialog-content>
...
</custom-dialog-content>
<custom-button>
浏览 3提问于2021-05-18得票数 2
回答已采纳
我正在将Cypress添加到我的Angular 6项目中，使用Angular材质。通过材质对话框(其中包含iFrame)欢迎新用户，并通过在对话框外部单击来关闭该对话框。 我在Cypress中尝试了几种方法来关闭这个对话框，并引入了等待和超时，以确保它与网络加载问题无关： cy.get('dialog-element', { timeout: 10000})
.wait(3000).click(-50, -50); 它失败是因为它被cdk-overlay-container所覆盖。使用click(...，{ force: true })没有帮助。已尝试 cy.get('
浏览 35提问于2018-12-20得票数 6
回答已采纳
我在bootstrap模式中使用mat-autocomplete有一个问题。我已经使用了下面的css，但仍然有问题：)
.cdk-overlay-container, .cdk-overlay-pane { z-index: 9999 !important; }
.pac-container {
background-color: #FFF;
z-index: 99999;
position: fixed;
display: inline-block;
float: left;
}
诸若此类
浏览 34提问于2021-05-25得票数 0
有叉的“明科Gechev”的翻译和覆盖注入。
import { Component, OnInit, Injectable } from '@angular/core';
import { CookieService } from "ngx-cookie-service";
import { ComponentType, Overlay, OverlayConfig } from "@angular/cdk/overlay";
import { TranslateService } from "@ngx-translate/core&#
浏览 2提问于2020-01-15得票数 1
我试图通过向对话框中添加一个自定义类来删除mat对话框容器周围的填充。
自定义类
.custom-dialog-container {
padding: 0px;
}
打开对话框
myFunction(data) {
const dialogConfig = new MatDialogConfig();
dialogConfig.data = {
data: data
}
dialogConfig.disableClose = false;
dialogConfig.width = "auto";
dialogC
浏览 9提问于2022-05-05得票数 0
我使用动态MatDialog进行确认，它在单击按钮时正确地显示消息，除非每次单击触发对话框的任何按钮时，cdk-overly-container都会出现在索引中，位于app-root下方，并永久向上移动--即使在对话框关闭之后。
服务类：
@Injectable({
providedIn: 'root'
})
export class DialogService {
constructor(private dialog: MatDialog) { }
confirmDialog(data: ConfirmDialogData): Observable<bo
浏览 6提问于2022-05-20得票数 0
回答已采纳
1回答
我正在使用Angular CDK来显示一个覆盖的元素。我的问题是，我想要将位置更改为右上角，但connectedTo函数的参数都没有执行此操作。
@Component({
template: `
<button cdk-overlay-origin (click)="openSpaghettiPanel()">
Pasta 3
</button>
`
})
export class AppComponent {
@ViewChild(OverlayOrigin) _overlayOrigin: OverlayO
浏览 1提问于2017-10-23得票数 3
我有一个更复杂的angular应用程序，我想将其部署为一个angular/elements want组件。该应用程序使用mat-dialog，not组件也不会占用100%的浏览器窗口大小。我的问题是mat-dialog的cdk-overlay默认情况下会添加到html页面的主体中，而我的对话框是在webcomponent之外打开的。
我想把覆盖层放在does组件内部，这样它就不会干扰组件外部的html。
我尝试提供一个自定义的OverlayContainer，如这里的第一个答案所述：
然而，我的angular应用程序不是自举的，因为我使用angular/elements来构建the组件，因此没
浏览 4提问于2020-12-08得票数 4
我正在一个私人的Angular 6应用程序上生成一个对话框，根据设计者的要求，它太低了，除非我的屏幕高度降低了，它是有响应的，并创建了一个cdk-overlay
style="justify-content: center; align-items: center;"
angular 6对话框的文档如下：
不幸的是，我没有看到一个配置选项或参数，可以设置离顶部的最大距离，例如，我永远不想让盒子离顶部超过200px。你有什么想法或想法来实现这一点吗？下面是驱动这一切的通用代码：
.ts代码：
this.blahDialog.open(this.dialogTemplate, &#
浏览 6提问于2020-06-05得票数 0
回答已采纳
2回答
如果<button>的子元素有文本<span trans"">Remove</span>，我需要在上下文菜单中隐藏一块<button>元素(显示:无)。
<div id="cdk-overlay-0" class="cdk-overlay-pane context-menu-overlay" style="pointer-events: auto; position: static;">
<drive-context-menu class="c
浏览 0提问于2020-01-18得票数 2
我正在修我的图书馆。我只是重构我的应用程序使用角CDK覆盖来显示上下文菜单，所以我不再需要在实际应用程序中包括一些组件(少一个安装步骤)。
我曾经使用在元素下面创建一个下拉列表，该元素将保持在页面中。创建此职位策略的方式类似于使用ElementRef：
const positionStrategy = this.overlay.position()
.flexibleConnectedTo(elementRef)
.left(state.left + 'px')
.top(state.top + 'px');
问题是我没有El
浏览 0提问于2018-11-18得票数 3
回答已采纳
我已经使用Angular Material (MatDialogModule)提供的基本功能实现了一个打开和保持打开多个窗口的服务。一切都很好，但我找不到一种方法来管理用户每次在窗口之间单击时的z索引。在这种情况下，被牵连的元素是包装器"cdk-global-overlay- wrapper“，它被复制，保持静态z索引"1000”，将可视化的优先级留给所添加的对话框元素的DOM中的位置。 我已经看到，如果我开发一个从cdk "overlay“传递过来的个性化服务，事情就变得可行了，但在这种情况下，我将失去Material提出的Dialog的所有直接功能和属性。 有什么
浏览 15提问于2019-04-15得票数 2
我想出了如何move a dialog。这或多或少是 <h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle >{{data.header}}</h1> 这意味着我必须添加 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle 在每个对话框中。因为我很懒，所以我不想在我的代码中添加相同的代码。因此，我想封装这4个指令(属性？)整合
浏览 21提问于2019-02-13得票数 0
2回答
我使用垫-菜单和垫-选择在不同的组成部分。我面临的问题是当我们
::ng-deep .cdk-overlay-container .cdk-overlay-pane {
}
在两个组件的css文件中，它们相互冲突(这是预期的)。那么，是否有一种方法可以自定义两个组件中的覆盖窗格，使其不影响其他组件的样式。
浏览 4提问于2020-05-08得票数 1
4回答
我的jquery对话框代码有一些输入字段和一个提交
onSubmit I显示了加载器div
代码片段是
$("#loading").show();
$("#loading-overlay").css("position", "fixed");
$("#loading-overlay").css("display", "block");
html是
<div id="loading-overlay">
</div>
<div id="
浏览 0提问于2015-01-22得票数 0
1回答
我试着把背景图像添加到mat对话框中，通过花一些时间在mat对话框文档上，我意识到我可以使用panelClass: 'my-class'来定制mat对话框的外观，在这里，my-class最终被应用到在mat对话框中有类cdk-overlay-pane的div，类似这样的东西。
然后，我添加了这个css，将背景图像放到马特对话框中。
.my-class .mat-dialog-container {
background: url("assets/illustrations/abc.svg") no-repeat;
padding-bottom:
浏览 0提问于2019-05-22得票数 1
我有一个Angular (9.1.4)项目，它使用ng-bootstrap (6.1.0)打开对话框。据我所知，每当模式打开时，都会有<div class='cdk-overlay-container' />添加到HTML中。
你知道Angular在哪里添加了这个div，以及如何删除它吗？
提前感谢！
浏览 0提问于2021-01-25得票数 1
2回答
我正在包括表单输入，垫选择与选项和自动完成字段与选项太到一个matDialog框。问题是选项显示在对话框的后面。我已经遇到了这些解决方案，但没有解决这个问题。下面是我的代码：
<mat-form-field class="wrapField">
<mat-select (selectionChange)="selectChange($event)" formControlName="product" placeholder="Alle Produkte">
<mat-option *n
浏览 6提问于2018-09-06得票数 7
我使用mat-select显示选项列表。因此，当您单击mat-select输入字段时，它会显示一个使用div和cdk覆盖窗格类的选项列表。我想自定义cdk覆盖窗格类。用途：：吴-深我这样做，
::ng-deep {
.cdk-overlay-pane {
transform: translateX(-40px) translateY(-13px) !important;
}
}
&它也能工作，但它正在影响另一个cdk覆盖窗格。
有没有办法把customClass给那个带有cdk覆盖面板的div？
<div id="cdk-overlay
浏览 5提问于2021-11-21得票数 3
回答已采纳
1回答
我正在创建一个生成cdk覆盖的服务。我正在尝试做的是找到一种方法来收听cdk滚动策略事件。更具体地说，我想知道cdk何时使用“关闭”滚动策略关闭覆盖。最终目标是创建一个可观察对象，消费者可以使用它来确定覆盖是否开放(有条件地应用css以及其他什么不开放)。 经过一些搜索之后，看起来overlayRef有一个属性_portalOutlet，它有一个属性_isDisposed (https://github.com/angular/material2/blob/master/src/cdk/overlay/overlay-ref.ts)。这看起来就是我要找的，但当然这些都是消费者无法使用的私有资
浏览 17提问于2019-01-08得票数 2
我打开了一个bug ()，，我问这个问题是为了看看是否有解决办法或修复谁知道。
此问题在此演示页面上可见。
这个问题是由于CDK面板(自动完成的面板)在演示中被呈现为一个单独的层，与自动完成元素不同。因此，当自动完成元素移出可滚动元素的可见区域时，自动完成将变为隐藏，但是面板不会因为这个单独的层呈现而出现。
在伪码中，角html如下所示，
<html>
<body>
<my-app>
<my-component cdkScrollable> // this is a scrollable element, it's child
浏览 1提问于2020-08-06得票数 0
回答已采纳
我想为项目中的所有对话框设置滚动策略。我测试了一个对话框的行为
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent {
constructor(public dialog: MatDialog, private overlay: Overlay) {}
showHelpDialog() {
浏览 48提问于2021-03-09得票数 0
回答已采纳
1回答
在此代码中：
<button md-icon-button [md-menu-trigger-for]="menu">
<md-icon>more_vert</md-icon>
<md-menu #menu="mdMenu">
<button md-menu-item>Item 1</button>
<button md-menu-item>Item 2</button>
</md-m
浏览 5提问于2017-03-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
