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

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

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

管理界面有自己独特的样式集，可能与前端的样式冲突

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

---

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

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

管理组件

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 {}

---

为什么不将样式封装到组件中呢？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 {}

管理组件

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 {}

---

我的路由器出口会去哪里？谢谢Bhetzie-正如你们所讨论的，我已经重组了我的组件层次结构。它确实带来了一些挑战-并且需要使用多个路由器出口来容纳前端和管理界面中的不同页眉/页脚。我的路由器出口会去哪里？谢谢Bhetzie-正如您所讨论的，我已经重新构建了我的组件层次结构。它确实带来了一些挑战——需要使用多个路由器出口来容纳前端和管理界面中的不同页眉/页脚。