角路由组件

Question

I currently have the following index.html 我目前有以下index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dentist Appointment System</title>
  <base href="/" />
</head>
<body>
  <app-component>
    loading...
  </app-component>
</body>
</html>

my app.component.html is: 我的app.component.html是：

<div class="main-container">
   <header class="header header-6">
      Dentists Appointment System
   </header>
   <nav>
      <a routerLink="/home" routerLinkActive="active">Home</a>
      <a routerLink="/login" routerLinkActive="active">Login</a>
      <a routerLink="/register" routerLinkActive="active">Register</a>
   </nav>
   <router-outlet></router-outlet>
</div>

app routing: 应用程序路由：

const appRoutes: Routes = [
   {path: 'home', component: HomeComponent},
   {path: 'register', component: RegisterComponent},
   {path: 'login', component: LoginComponent},
   {path: '**', component: HomeComponent}
];

@NgModule({
             imports: [
                RouterModule.forRoot(
                      appRoutes,
                      {
                         useHash: true,
                         enableTracing: false // <-- debugging purposes only
                      }
                )
             ],
             exports: [
                RouterModule
             ]
          })
export class AppRoutingModule {
}

What i ultimately want to do is. 我最终想做的是。 Initially you go to Home page. 最初，您转到主页。 On top you have register and login nav options. 最重要的是，您具有注册和登录导航选项。 On click - they appear in router outlet. 单击时-它们出现在路由器出口中。 After you login or register I want to redirect each type of user to a different component like : DentistComponent, PatientComponent, AdminComponent and I want those components to replace not only whats in the router outlet, but also to replace the nav bar I have on top (with login, reg and home). 登录或注册后，我想将每种类型的用户重定向到不同的组件，例如：DentistComponent，PatientComponent，AdminComponent，并且我希望这些组件不仅可以替换路由器插座中的内容，还可以替换我上面的导航栏（具有登录名，注册名和首页）。 And then in each user component I will have different child components and routes, ultimately different views. 然后在每个用户组件中，我将拥有不同的子组件和路由，最终会有不同的视图。

I receive the currenlty logged in user type like so: 我收到当前登录的用户类型，如下所示：

ngOnInit(): void {
      this.userRole = CommonUtil.getSessionUserRole();
      console.log(this.userRole); //DENTIST, PATIENT, ADMIN
   }

so I have access to it in my app.component.ts.. 所以我可以在我的app.component.ts中访问它。

What is the best way to using the userRole to open the different components (dentist, patient, admin) and replace the app-component's content with them? 使用userRole打开不同组件（牙医，患者，管理员）并用它们替换应用程序组件内容的最佳方法是什么？ Thanks in advance! 提前致谢！

Answer 1

Use Children Paths like 使用儿童路径，例如

const appRoutes: Routes = [
   {path:'', component:MainComponent, children:[
       {path: 'home', component: HomeComponent},
       {path: 'register', component: RegisterComponent},
       {path: 'login', component: LoginComponent},
   ]},
   {path:'Patient',component:PatienComponent,children:[
     {path:'...}
   ],
    {path:'Admin',component:AdminComponent,children:[..]},
    ...
   {path: '**', component: HomeComponent}

];

角路由组件

问题描述

1 个解决方案

解决方案1
0 2017-12-03 13:50:56

角路由组件

问题描述

1 个解决方案

解决方案1 0 2017-12-03 13:50:56

解决方案1
0 2017-12-03 13:50:56