Question

我有角形项目，我从角形材料中添加了底片，然后它起作用了。我尝试使打开的弹出窗口对botton保持粘性并响应他，但不起作用。

我的主要组成部分：

import { Component, OnInit } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { PopupsDialogComponent } from '../../../modules/home/components/popups-dialog/popups-dialog.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {

  constructor(private _bottomSheet: MatBottomSheet) { }

  ngOnInit() {
  }
  openBottomSheet(): void {
    this._bottomSheet.open(PopupsDialogComponent, {
      panelClass: 'custom-popup'
    });
  }
}

主要组件html：我希望对话框让他讨厌的按钮

<header>
  <div class="container">
    <button mat-fab class="mat-success" (click)=openBottomSheet()>+</button>
  </div>
</header>

PopupsDialogComponents：

import { Component } from '@angular/core';
import {MatBottomSheetRef} from '@angular/material/bottom-sheet';
@Component({
  selector: 'app-popups-dialog',
  templateUrl: './popups-dialog.component.html',
  styleUrls: ['./popups-dialog.component.sass']
})
export class PopupsDialogComponent {

  constructor(private _bottomSheetRef: MatBottomSheetRef<PopupsDialogComponent>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }

}

style.css：

.custom-popup
    position: absolute
    top: 95px
    right: 26%
    min-width: 0% !important

非常感谢

Answer 1

最近渲染了一些内置的角度分量，我认为您可以使用 CSS 来处理此问题，例如：

:host ::ng-deep .custom-popup {
    position: absolute
    top: 95px
    right: 26%
    min-width: 0% !important
}

使底部薄板（按钮）粘到按钮上（角度材料）

1 个答案: