Question

我的应用具有某些角色，例如学生，老师等。我的路由定义为

const routes : Routes = [
  { path : '', component : StudentDashboard }
]

我想知道是否可以根据角色动态地将StudentDashboard替换为TeacherDashboard。服务中存在有关角色的数据。

我尝试过

const routes : Routes = [
  { path : '', component : true ? StudentDashboard : TeacherDashboard }
]

这没有给出任何编译错误。但是如何从服务中获取角色，以便可以替换三元表达式中的条件。

我不需要的是 1）重新路由2）有条件的子组件我正在寻找操纵路线的定义，我不知道是否可能，但是尝试一下

Answer 1

为什么不将两条路径都放在路由模块中？

const routes : Routes = [
  { path : 'teacher', component : TeacherDashboard },
{path:'student', component : StudentDashboard}
];

在导航时，您可以从服务中进行检查：

if(yourService.role === 'student') {
 this.router.navigate(['/student']);
} else {
this.router.navigate(['/teacher']);
}

好吧，如果路径为空，则可以使用结构指令ngIf：

<app-student *ngIf="role === 'student'"></app-student>
<app-teacher *ngIf="role === 'teacher'"></app-teacher>

在component.ts中，您可以从服务获得角色：

role: string;
ngOnInit() {
this.role = yourservice.role;
}

Answer 2

我将创建另一个称为“仪表板”的常规组件，该类中有2个类型为TeacherDashboard和StudentDashboard的变量。

在应用路由中，我将设置{path：'：id'，component：DashBoardComponent}

在仪表板中

student: StudentDashboardComponent;
teacher: TeacherDashboardComponent;
role: boolean;
// httpService is the service file where u call your api
counstructor(private router: Router, private http: HttpService) {}

ngOnInit() {
    const id = this.router.url.substring(0);
    this.http.searchTeacher(id).subscribe(
        res => {
            role = true; //true for teacher and false for student
        }); // if u get err 404, it doesn't care
    this.http.searchStudent(id).subscribe(
        res => {
            role = false; //true for teacher and false for student
        },
        err => {
            console.log(err);
            ... do something...
        });
    -do your staff-
}

您必须使该代码适合您的项目，但是我在我的项目中做到了这一点，并且运行得非常好，您还可以结合使用TeacherDashboard和StudentDashboard以及* ngIf来优化所有这些东西，如果您可以发挥所有作用，想做。

我希望我能帮上忙。

动态创建路线

2 个答案: