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

Question

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

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

管理界面有自己独特的一组样式，它可能会与前端的样式相冲突。

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

我已经考虑使用2个不同的根组件和封装的CSS - 但是 - 大多数样式是在常规的CSS文件 - 我不相信这是可行的将这些与不同的根组件。

Answer 1

为什么你不只是在组件中封装样式？ Angular 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 {}