gpt4 book ai didi

不同用户的 Angular 路由 View

转载 作者:行者123 更新时间:2023-12-04 03:07:42 25 4
gpt4 key购买 nike

我正在尝试在我的 Angular 4 应用程序中为 3 种类型的用户设置路由。

一旦用户登录,他将被重定向到我的应用程序组件。这是我的 app-component.html 的样子:

<div class="main-container">
<div class="wrapper">
<router-outlet></router-outlet>
</div>
</div>

我想检查用户的类型,并据此检查 - 在我的路由器 socket 中打开一条不同的路由。为了给你一个想法,我将向你展示我想要的结构:

index.html
>app-component
>register-component
>login-component
>dentist-view
schedule component
patients component
profile component
appointments component etc..
>admin-view
manage users component
>patient-view
ambulatory-lists component
profile component
dentist search component
book appointment component etc..

所以根据用户类型,我想加载完全不同的 View ,这些 View 在我的项目中是这样构造的。我希望每个用户都有不同的导航栏,不同的编辑配置文件组件等。实现此目的的正确方法是什么,因为一旦登录我将在重定向到应用程序组件时收到用户类型,因此我将能够发送它给它的 child - dentist-view-component, patient-view-component 等等。

为了给你一个更好的想法,比如替代这个,但是路由会很棒:(免责声明:我知道这是不可能的:D)在 app.component.html 中:

<div class="main-container">
<div class="wrapper">
<router-outlet>
<dentist-component *ngIf="isDentist()"></dentist-component>
<patient-component *ngIf="isPatient()"></patient-component>
<admin-component *ngIf="isAdmin()"></admin-component>
</router-outlet>
</div>
</div>

由于我是新手并且仍在弄清楚事情,所以我想知道我是在朝着正确的方向前进还是在走完全错误的道路。非常感谢任何建议。

最佳答案

此答案基于 @abdul hammed answer更多信息在 Angular.io documentation

守卫是解决方案(guard.service):

    import { Injectable }     from '@angular/core';
import { CanActivate } from '@angular/router';
import { Router } from '@angular/router';

@Injectable()
export class Guard implements CanActivate {
canActivate() {

if (this.user && this.user.profile.role == 'Dentist') {
this.router.navigate(['dentist']);
} if else (this.user && this.user.profile.role == 'Patient') {
this.router.navigate(['patient']);
} ...

return true;
}

constructor(private router: Router) { }
}

而且你必须更新你的app.module文件,

import { Guard } from './_services/guard.service';
import { DentistComponent } from './dentist/dentist.component';
import { PatientComponent } from './dentist/patient.component';
@NgModule({
declarations: [
AppComponent,
DentistComponent,
PatientComponent
],
imports: [
BrowserModule,
HttpModule,

RouterModule.forRoot([
{
path: 'dentist',
component: DestistComponent,
canActivate:[Guard]
},
{
path: 'patient',
component: PatientComponent,
canActivate:[Guard]
}
])
],
providers: [Guard],
bootstrap: [AppComponent]
})
export class AppModule { }

关于不同用户的 Angular 路由 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47611423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com