Angular 5 - 为不同的文件夹分隔或隔离 app.component

Question

我在我的新项目中使用 Angular 5.2+，我对这项技术也是新手。

这是我的ang项目的文件夹结构：-

目前我的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 {
 }

现在是主要问题：- 我想为管理员和客户端文件夹提供单独的 app.component.html 文件。因为管理员和客户端都有不同的页面结构。如何将 app.component.html 进一步抽象为 admin 和 client ？

如何使 app.component.html 内容特定于管理和客户区域。

或者我可以控制 app-header、app-leftnav 的呈现 w.r.t。管理员和客户端路由 ?

请提出合适的解决方案。

Answer 1

您的 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'
  }

Angular 5 - 为不同的文件夹分隔或隔离 app.component

Angular 5 - Separate or segregate the app.component for different folders

angular-routing

angular

angular5