Angular基础主题eLayoutType.application布局如何占满全窗口宽度？

该布局默认对大屏设备设置了固定最大宽度的容器限制，LayoutService的checkWindowWidth()方法会根据窗口宽度匹配响应式断点，超宽时自动添加带max-width属性的container类，是两侧留白的核心原因。

以下是针对仅面向大屏设备使用场景的调整方案：

• 方案1：全局样式覆盖（最简便）
  在全局样式文件styles.scss中添加如下代码，直接覆盖容器宽度限制：

/* 适配默认主题的application布局容器 */
.abp-application-layout .container,
.abp-application-layout .container-lg {
  max-width: 100% !important;
  /* 可根据需求调整左右内边距，不需要留白直接设为0 */
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* 若使用LeptonX主题，添加以下代码 */
.lpx-layout-container {
  max-width: 100% !important;
}

• 方案2：通过LayoutService配置修改
  无需覆盖样式，直接在根组件app.component.ts中修改布局配置：

import { LayoutService } from '@abp/ng.theme.shared';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: ``,
})
export class AppComponent implements OnInit {
  constructor(private layoutService: LayoutService) {}

  ngOnInit(): void {
    const currentConfig = this.layoutService.config$.value;
    this.layoutService.config$.next({
      ...currentConfig,
      application: {
        ...currentConfig.application,
        // 强制设置应用容器宽度为100%
        containerWidth: '100%',
      },
    });
  }
}

• 方案3：禁用响应式断点判断
  如果完全不需要适配中小屏，可以直接重写checkWindowWidth方法，固定为大屏状态：

// 在app.component.ts的构造函数中添加
constructor(private layoutService: LayoutService) {
  (this.layoutService as any).checkWindowWidth = () => {
    this.layoutService['isDesktop'] = true;
    this.layoutService['isTablet'] = false;
    this.layoutService['isMobile'] = false;
  };
}

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