Как я могу использовать отдельные шаблоны для администратора и пользователя в проекте angular5? - PullRequest
Новая
       30

Как я могу использовать отдельные шаблоны для администратора и пользователя в проекте angular5?

0 голосов
/ 28 июня 2018

Это моя 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>

1 Ответ

0 голосов
/ 28 июня 2018

Да, вы можете сделать это, вы бы использовали Angular 5 Routing и настроили два маршрута: один для пользователей и один для администраторов, чтобы пользователи переходили на 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 вы можете редактировать на каждом компоненте, а затем сделаете так, чтобы у вас был отдельный шаблон для каждого

...