Angular11使用AdminLTE3时两套布局冲突如何解决？

你在各布局组件模板内编写的<body>标签仅属于组件内部DOM结构，并不会作用到index.html里的全局真实<body>节点上。AdminLTE的布局样式完全依赖全局body上的类控制侧边栏预留空间、导航布局等效果，你之前的写法里落地页需要的body类没有实际生效，才会出现预留侧边栏位置的偏移问题。

方法1：路由动态切换全局body类（推荐） #

该方案完全贴合AdminLTE的布局规则，无样式冲突概率最低：

1. 先在路由配置中为不同路由添加元信息，标注对应布局需要的body类：

// app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: LandingPageComponent,
    data: {
      bodyClass: 'hold-transition layout-top-nav layout-fixed layout-navbar-fixed layout-footer-fixed'
    }
  },
  {
    path: 'dashboard',
    component: MainPageComponent,
    data: {
      bodyClass: 'hold-transition sidebar-mini layout-fixed'
    }
  },
  // 其余路由配置保持不变
];

2. 在AppComponent中监听路由变化，用Angular官方推荐的Renderer2操作全局body的类：

// app.component.ts
import { Component, OnInit, Renderer2 } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private renderer: Renderer2
  ) {}

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 先清除所有之前挂载过的布局类，避免残留
      const allLayoutClasses = [
        'hold-transition', 'layout-top-nav', 'layout-fixed', 
        'layout-navbar-fixed', 'layout-footer-fixed', 'sidebar-mini'
      ];
      allLayoutClasses.forEach(cls => {
        this.renderer.removeClass(document.body, cls);
      });
      // 添加当前路由对应的body类
      const currentRouteData = this.router.routerState.root.firstChild?.snapshot.data;
      if (currentRouteData?.bodyClass) {
        currentRouteData.bodyClass.split(' ').forEach(cls => {
          this.renderer.addClass(document.body, cls);
        });
      }
    });
  }
}

3. 最后移除你各个布局组件模板里的<body>标签，仅保留内部的wrapper、导航、路由插座、页脚等结构即可，index.html的body标签保持空状态即可。

方法2：组件内样式覆盖 #

如果不想操作全局DOM，也可以直接在落地页组件加样式强制覆盖AdminLTE默认的侧边栏预留偏移：
给落地页最外层容器添加自定义类landing-wrapper，添加如下样式：

/* landing-page.component.css */
.landing-wrapper {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

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