点击Logs路由调整Modal最大宽度失效问题求助

问题描述 #

需要实现：点击Logs路由时，将Modal的max-width设置为80%；点击其他路由时，设置为50%。使用::ng-deep覆盖Bootstrap样式，但当前方案未生效。

原方案失效原因 #

1. 选择器层级错误：原SCSS中将::ng-deep嵌套在按钮的类选择器内，而.modal-dialog并非按钮元素的后代节点，导致样式选择器无法匹配到目标元素。
2. 状态更新不全面：仅通过按钮点击事件切换isLogsLinkClicked状态，若用户直接通过URL跳转路由，状态不会同步更新。

解决方案 #

步骤1：监听路由变化，同步状态 #

修改组件TS代码，通过监听路由事件自动判断当前是否为Logs路由，确保状态与路由一致：

import { Subscription } from 'rxjs';
import { NavigationEnd, Router } from '@angular/router';
import { OnInit, OnDestroy } from '@angular/core';

export class QmSettingsAdminModalComponent implements OnInit, OnDestroy {
  @Input() unitId: any;
  public isLogsRoute = false;
  private routeSubscription!: Subscription;

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

  ngOnInit() {
    // 监听路由导航结束事件，更新状态
    this.routeSubscription = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.isLogsRoute = this.router.url.includes('/logs');
      }
    });
    // 初始化时检查当前路由
    this.isLogsRoute = this.router.url.includes('/logs');
  }

  ngOnDestroy() {
    // 销毁订阅避免内存泄漏
    this.routeSubscription?.unsubscribe();
  }
}

步骤2：将动态类绑定到Modal根容器 #

修改HTML，将控制宽度的动态类绑定到Modal的根容器（而非按钮），确保样式能作用到.modal-dialog：

<!-- 绑定动态类到Modal根容器 -->
<div [ngClass]="{'modal-logs-width': isLogsRoute, 'modal-default-width': !isLogsRoute}">
  <mat-sidenav mode="side" opened>
    <button
      mat-button
      class="menu-button"
      routerLink="/settings"
      routerLinkActive="active"
    >
      <span>{{ "label.name.settings" | translate }}</span>
    </button>
    <button
      mat-button
      class="menu-button"
      routerLink="/pin"
      routerLinkActive="active"
    >
      <span>{{ "label.name.changepin" | translate }}</span>
    </button>
    <button
      mat-button
      class="menu-button"
      routerLink="/logs"
      routerLinkActive="active"
    >
      <span>{{ "label.name.logs" | translate }}</span>
    </button>
    <button
      mat-button
      class="menu-button"
      routerLink="/automatic-upgrade"
      routerLinkActive="active"
    >
      <span>{{ "label.name.automaticupgrade" | translate }}</span>
    </button>
    <button
      mat-button
      class="menu-button"
      routerLink="/cache"
      routerLinkActive="active"
    >
      <span>{{ "label.name.cache" | translate }}</span>
    </button>
    <button
      mat-button
      class="menu-button"
      routerLink="/unit-info"
      routerLinkActive="active"
    >
      <span>{{ "label.name.unitinfo" | translate }}</span>
    </button>
  </mat-sidenav>
  <!-- Modal其他内容 -->
</div>

步骤3：调整SCSS样式写法 #

修改SCSS，使用::ng-deep正确穿透样式作用域，确保能匹配到.modal-dialog：

// 默认宽度：50%
::ng-deep .modal-default-width .modal-dialog {
  max-width: 50% !important;
  margin-left: auto;
  margin-right: auto;
}

// Logs路由宽度：80%
::ng-deep .modal-logs-width .modal-dialog {
  max-width: 80% !important;
  margin-left: auto;
  margin-right: auto;
}

若动态类直接绑定到组件宿主元素，可改用:host选择器优化：

:host(.modal-default-width) ::ng-deep .modal-dialog {
  max-width: 50% !important;
  margin-left: auto;
  margin-right: auto;
}

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

内容的提问来源于stack exchange，提问作者Vihan Gammanpila