Angular CDK的OverlayModule,cdk-overlay-pane不会设置position为absolute?

Angular CDK's OverlayModule, cdk-overlay-pane will not set position to absolute?

我正在使用 Angular 的 CDK 的覆盖模块。而且我只是找不到添加 position: absolute 到叠加层的方法?该模块将收到一个 top 和一个 left 位置,与连接的元素位置匹配,但叠加层不会收到 position: absolute。由于 ViewEncapsulation,我无法添加绝对位置。我真的很难找到解决方案。

问题: 我如何使用 cdkOverlayOrigincdkConnectedOverlayOrigin

模块:

import { OverlayModule } from '@angular/cdk/overlay';



@NgModule({
  imports: [
    OverlayModule,
  ],
  declarations: [ MenuComponent ],
})
export class MenuModule {
}

组件:

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: [ './menu.component.scss' ],
})
export class MenuComponent {
}

模板:

 <div style="margin: 0 auto; width: 30%">
  <h1 cdkOverlayOrigin
      #checkListTrigger="cdkOverlayOrigin"
      (click)="checkListOpen = !checkListOpen"
      style="background: blue">Overlay Origin</h1>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="checkListTrigger"
    [cdkConnectedOverlayOpen]="checkListOpen">

    <ng-container>
      <p>Why you no positioned on h1 element</p>
    </ng-container>

  </ng-template>
</div>

看看它是如何偏离中心的

如果我添加 position: absolute 它现在可以正常工作了吗?

这在API documentation中有描述。您可以为叠加窗格指定面板 class。

这是一些代码:

const overlay = overlay.create({
    panelClass: 'pos-absolute'
});
.pos-absolute {
    position: absolute;
}

生成的覆盖容器的绝对定位在 .cdk-overlay-pane class 中定义,它是 angular material 主题的一部分。您可能忘记添加主题了?

如果是,请将以下行添加到您的 style.css 文件中(假设您使用 Angular CLI 项目)。 @import "~@angular/material/prebuilt-themes/indigo-pink.css";