web-dev-qa-db-ja.com

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

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

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

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

angularoverlayangular-material2angular-cdk
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