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

时间:2019-07-17 05:48:20

标签: css angular

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

有没有办法根据需要动态调用这两个style.css文件?或者我需要一个一个地检查每个班级?

1 个答案:

答案 0 :(得分:0)

我建议您使用两种不同的布局,每种布局都是一个组件,因此每种布局都有不同的样式集。用角路由器真的很容易。

在您的路由模块中:

// 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>

布局模板必须包含要包含的元素,以显示子导航组件。

重要:每个放样控制器应禁用视图封装,以便样式应用到子组件:

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