Angular 5 - Разделить или отделить app.component для разных папок - PullRequest
Новая
       19

Angular 5 - Разделить или отделить app.component для разных папок

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

Я использую Angular 5.2+ в своем новом проекте, и я также новичок в этой технологии.

Вот структура папок моего анг проекта: -

enter image description here

В настоящее время мой app.component.html выглядит так: - 

<app-header></app-header>
<app-leftnav></app-leftnav>
<div class="container body-content"> 
    <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

Эти селекторы, такие как <app-header> , <app-leftnav>, являются отдельными компонентами.

app.component.ts выглядит следующим образом: - 

import { Component } from '@angular/core';    
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent  { }

admin-routing.module.ts выглядит следующим образом: - 

import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { UserSearchModule } from './userSearch/userSearch.module';

@NgModule({
    imports: [UserSearchModule],
    exports: [RouterModule]
})

export class AdminRoutingModule {
 }

Теперь основная проблема: - Я хочу иметь отдельное приложение.Файл component.html для папок администратора и клиента.Потому что и администратор, и клиент имеют разные структуры страниц.Как я могу сделать дальнейшую абстракцию app.component.html для администратора и клиента?

Как сделать контент app.component.html специфичным для областей администратора и клиента.

Или я могу управлять отображением заголовка приложения, app-leftnav по маршрутам администратора и клиента?

Пожалуйста, предложите подходящее решение.

1 Ответ

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

Ваш app.component является точкой входа в ваше приложение, поэтому вы не должны пытаться изменить его для своих пользовательских профилей.

Вместо этого вы можете определить макет для каждого пользовательского профиля (компонентас <router-outlet> внутри)

Затем определите ваши маршруты следующим образом: 

{
    path: 'admin',
    component: AdminLayoutComponent,
    canActivate: [AdminGuard],
    loadChildren: '../admin/admin.module#AdminModule'
  }, {
    path: 'client',
    component: ClientLayoutComponent,
    canActivate: [ClientGuard],
    loadChildren: '../client/client.module#ClientModule'
  }
...