angular - 当路由点击时需要增加模态框的最大宽度

我想在点击日志时，将模态框的最大宽度增加到80%，而其他路由则需要设置最大宽度为50%。我使用::ng-deep是因为它们的样式来自Bootstrap，因此我需要覆盖这些样式。但这一条对我不起作用。

这是我的 HTML，

<mat-sidenav mode="side" opened>
              <button
                mat-button
                class="menu-button"
                routerLink="/settings"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.settings" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/pin"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.changepin" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/logs"
                [ngClass]="{'logs-button-clicked': isLogsLinkClicked}"
                (click)="syncDevice()"
                routerLinkActive="active"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.logs" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/automatic-upgrade"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.automaticupgrade" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/cache"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.cache" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/unit-info"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.unitinfo" | translate }}</span>
              </button>
            </mat-sidenav>

这是我的 ts 函数，

export class QmSettingsAdminModalComponent implements OnInit {
  @Input() unitId: any;
  public isLogsLinkClicked = false;

  constructor(
    public activeModal: NgbActiveModal,
    private deviceService: DeviceService,
    private router: Router
  ) {}
  ngOnInit() {}

  syncDevice() {
    this.isLogsLinkClicked = true;
  }

  otherDevice() {
    this.isLogsLinkClicked = false;
  }
}

这是我的 scss，

.other-button-clicked {
  ::ng-deep .modal-dialog {
    max-width: 50% !important;
    margin-left: auto;
    margin-right: auto;
  }
}

.logs-button-clicked {
  ::ng-deep .modal-dialog {
    max-width: 80% !important;
    margin-left: auto;
    margin-right: auto;
  }
}

答案＃1

当你打开一个 ngb-modal 时，你可以使用 NgbModalOptions 指定 "modal-dialog" 的类。如果你查看文档，你会看到有一个属性 "modalDialogClass"，所以你可以使用类似如下的方式：

this.modalService.open(content, { 
             ariaLabelledBy: 'modal-basic-title',
             modalDialogClass:'short'})

所以你的模态对话框是一个模态对话框之类的。所以你可以在“styles.css”中添加 (*)

.modal-dialog.short .modal-content {
  max-width: 50%;
  margin: auto;
}

同样，你可以有一个 .css

.modal-dialog.large .modal-content {
  max-width: 80%;
}

并使用 modalDialogClass: 'large'

(*)通常最好使用更具体的 .css，并将样式添加到你在整个应用程序中使用的 .css 文件中，而不是使用 ::ng-deep

更新 正确的应该暗示媒体屏幕，例如

  .modal-dialog.short .modal-content {
    max-width: 50%;
  }
  @media (min-width: 576px) {
    .modal-dialog.large {
      max-width: 100%;
      min-width: 100%;
      margin: auto;
    }
  }

查看 stackblitz（注意：在 stackblitz 中，.css 在各自的 index.html 中，我们可以使用 styles.css 或其他全局样式）