时间戳

首页 > 解决方案 > 如何在 angular5 项目中为管理员和用户使用单独的模板？

css - 如何在 angular5 项目中为管理员和用户使用单独的模板？

问题描述

这是我的index.html页面。我只使用一个索引页。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Angular5</title>
  <base href="/">

  <link rel="icon" type="image/png" href="assets/img/favicon.ico">
  <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <meta name="viewport" content="width=device-width" />
  <!--     Fonts and icons     -->
  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,300,700' rel='stylesheet' type='text/css'>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>
  <app-root></app-root>
</body>

</html>

标签： cssnode.jstemplatesangular5angular-cli

解决方案

是的，您可以这样做，您将使用 Angular 5 路由并设置两条路由，一条为用户，一条为管理员，这样用户会去，example.com管理员会去example.com/admin

首先，您将创建一个名为的文件app-routing.module.ts并使其看起来像这样：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserLayoutComponent } from './pages/user-layout/user-layout.component';
import { AdminLayoutComponent } from './pages/admin-layout/admin-layout.component';
import { HomeComponent } from './pages/home/home.component';
import { AdminDashboardComponent } from './pages/admin/dashboard.component';

const routes: Routes = [
  { path: '', component: UserLayoutComponent, children: [
      { path: '', component: HomeComponent },
      // Other Links that will look like example.com/example-link
  ] },
  { path: 'admin', component: adminLayoutComponent, children: [
      { path: '', component: AdminDashboardCompoent },
      // Other Links that will look like example.com/admin/example-link
  ] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在您app.module.ts将导入 import { AppRoutingModule } from './app-routing.module';然后将其添加到您的导入

imports: [
    BrowserModule,
    AppRoutingModule,
    ...
    // Other Modules
],

然后，您user-layout.component.html将<router-outlet></router-outlet>在您的模板中添加您希望内容显示的位置。所以如果你有一个菜单，你会这样做。其他布局文件也一样。

<div class="my-menu">
    ...
    // Menu content
</div>
<router-outlet></router-outlet>

链接看起来像<li routerLink="/admin">Admin Dashbord</li>这样<li routerLink="/">Home</li>

您可以在每个组件上编辑 CSS，然后将其制作出来，这样您就可以为每个组件创建一个单独的模板

推荐阅读