角CDK的OverlayModule，cdk-overlay-pane不会将位置设置为绝对值吗？

Question

我正在使用Angular CDK的Overlay模块。我只是找不到添加位置的方法：叠加层的绝对位置？该模块将接收top和的left位置，该位置与所连接元素的位置匹配，但是覆盖层将不接收position: absolute。由于ViewEncapsulation，我无法添加绝对位置。我真的很努力寻找解决方案。

问题： 如何使用cdkOverlayOrigin和cdkConnectedOverlayOrigin

模块：

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>

看看它如何偏离中心

如果我添加位置：绝对位置，现在可以按预期运行吗？

Answer 1

在.cdk-overlay-pane类中定义了生成的叠加容器的绝对位置，该类是角度材质主题的一部分。您可能忘记了添加主题？

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

Answer 2

API 文档中对此进行了描述。您可以为覆盖窗格指定面板类。

这是一些代码：

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

.pos-absolute {
    position: absolute;
}