Question

这是我的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>

Answer 1

是的，您可以使用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，然后将其制作为CSS，以便每个组件都有一个单独的模板

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

1 个答案: