web-dev-qa-db-ja.com

Angular CDKのOverlayModule、cdk-overlay-paneは位置を絶対に設定しませんか?

AngularのCDKのオーバーレイモジュールを使用しています。そして、私は位置を追加する方法を見つけることができません:オーバーレイに絶対ですか?モジュールは、接続された要素の位置と一致するtopleftの位置を受け取りますが、オーバーレイは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>

それがどのように中心から外れているかを見てください enter image description here

位置を追加すると:絶対に意図したとおりに機能するようになりましたか? enter image description here

3
Matthew Harwood

これは APIドキュメント で説明されています。オーバーレイペインのパネルクラスを指定できます。

ここにいくつかのコードがあります:

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

生成されたオーバーレイコンテナの絶対位置は、angularマテリアルテーマの一部である.cdk-overlay-paneクラスで定義されます。テーマを含めるのを忘れた可能性がありますか?

その場合は、style.cssファイルに次の行を追加します(Angular CLIプロジェクトを使用していると仮定)。@import "~@angular/material/prebuilt-themes/Indigo-pink.css";

4
cmonsqpr