@ angular / cdk / overlay全局和居中位置不起作用

Question

我正在尝试使用新的@ angular / cdk，但是位置策略似乎不起作用，只想显示以背景为中心的模式，我知道我可以在窗格中设置一个类并在其中设置固定值定位，但是在那种情况下，我不知道positionStrategy的配置是什么，我希望尽可能适应@ angular / cdk功能。

示例如下：https://stackblitz.com/edit/angular-9nthad?file=src%2Fapp%2Fhello.component.ts

Answer 1

我自己遇到了这个问题。如果您是单独使用CDK，而没有棱角材料，那么您会丢失处理很多定位的样式表。在cdk内部，您需要导入一个“覆盖预构建”的CSS文件，以使其能够正确呈现。

@import "~@angular/cdk/overlay-prebuilt.css";

只需确保您不将其导入到封装的组件中即可。您需要在全局css / scss文件中使用它。

Answer 2

如果您忘记安装角度CDK，请安装它。

> npm i @angular/cdk

然后将“覆盖预构建”和“ a11y预构建”导入到全局样式文件中。

@import "~@angular/cdk/overlay-prebuilt.css";

@import "~@angular/cdk/a11y-prebuilt.css";

您可以找到完整的文档here