两个不同html页面之间的Angular2路由

Question

我有一个包含前端和管理界面的angular2应用程序。

前端有一组在index.html中定义的独特的前端样式。

管理界面有自己独特的风格集，这可能与前端的样式发生冲突。

因此，我想要一个admin.html和一个index.html。如果用户选择使用admin.html显示的路径/admin/**，则显示index.html。应用程序中的其他一切(应用程序模块、服务等)都应该共享。

我已经考虑过使用两个不同的根组件并封装css --但是--大多数样式都在常规的css文件中--我不认为将它们与不同的根组件相关联是可行的。

Answer 1

为什么不直接将样式封装在组件中呢？角2是一个单一的页面应用程序。您不应该也不应该使用多个html页面(index.html)。您只需创建不同的组件并为每个组件指定一个样式表：

家庭组件

import { Component } from '@angular/core';


@Component({
  moduleId: module.id,
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css'],
  selector: 'home',
})
export class HomeComponent {}

管理组件

import { Component } from '@angular/core';


@Component({
  moduleId: module.id,
  templateUrl: 'admin.component.html',
  styleUrls: ['admin.component.css'],
  selector: 'admin',
})
export class AdminComponent {}