角度布线组件
角度布线组件
提问于 2017-12-03 21:29:32
我目前有以下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>我的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>应用路由：
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 {
}我最终想做的是。最初，您会转到主页。在顶部，您有注册和登录导航选项。单击-它们出现在路由器插座中。在你登录或注册后，我想要将每种类型的用户重定向到不同的组件，如: DentistComponent，PatientComponent，AdminComponent，我希望这些组件不仅替换路由器插座中的内容，而且还替换我在顶部的导航栏(与登录，注册和主页)。然后，在每个用户组件中，我将拥有不同的子组件和路由，最终拥有不同的视图。
我收到如下所示的当前登录用户类型：
ngOnInit(): void {
this.userRole = CommonUtil.getSessionUserRole();
console.log(this.userRole); //DENTIST, PATIENT, ADMIN
}因此，我可以在我的app.component.ts中访问它。
使用userRole打开不同的组件(牙医、患者、管理)并用它们替换应用程序组件的内容的最佳方式是什么？提前感谢！
回答 1
Stack Overflow用户
发布于 2017-12-03 21:50:57
使用子路径，如
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}
];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47618864
复制相关文章
相似问题
腾讯云开发者
