时间戳

首页 > 解决方案 > 在一个角度应用程序中动态切换两个styles.css文件

css - 在一个角度应用程序中动态切换两个styles.css文件

问题描述

我必须将两个角度应用程序合并到一个主要的角度应用程序中。因此，现在我在一个 Angular 应用程序中有两个 styles.css 文件。在合并两者后运行此应用程序时，css 完全适用于 angular 应用程序。

有什么方法可以根据需要动态调用这两个 style.css 文件？还是我需要一一检查每个班级？

标签： cssangular

解决方案

我建议你使用两种不同的布局，每一种都是一个组件，所以每一种都有不同的样式集。角度路由器真的很容易。

在您的路由模块中：

// Layout 1
  {
    path: '',
    component: Layout1Component,
    children: [
      { path: 'pageL1_1', component: PageL1_1Component },
      { path: 'pageL1_2', component: PageL1_2Component }
    ]
  },

  // Layout 2 routes goes here here
  {
    path: '',
    component: Layout2Component,
    children: [
      { path: 'pageL2_1', component: PageL2_1Component },
      { path: 'pageL2_2', component: PageL2_2Component }
    ]
  },

在您的 app.component.html 中：

<router-outlet></router-outlet>

布局模板必须包含元素才能显示子导航组件。

重要提示：每个布局控制器都应禁用视图封装，以便样式应用 ti 子组件：

@Component({
  selector: 'app-layout_1',
  templateUrl: './layout_1.component.html',
  styleUrls: ['./layout_1.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class Layout1Component implements OnInit {
...
}

推荐阅读