导航时如何将数据从Sidemenu传递到其他页面

Question

所以基本上我有两种类型的用户Teacher和Student，所以应该如何根据用户类型显示不同的个人资料屏幕。

我的Sidemenu在app.components.ts中

Answer 1

假设您要导航到相应页面，
您可以使用组件中的router.navigate函数或HTML本身中的routerLink来实现。
我们将为教师和学生以及组件以及相应的CSS和HTML文件创建单独的文件夹。

步骤1）我们将上述组件的路由添加到app-module.routings.ts文件中，该文件必须在应用程序的app文件夹中手动创建

app-module.routings.ts

import { TeacherComponent } from './teacher/teacher.component';
import { StudentComponent } from './student/student.component';

const routes: Routes = [
  { path: '', redirectTo: '/teacher', pathMatch: 'full' },
  { path: 'teacher', component: TeacherComponent },
  { path: 'student', component: StudentComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

第2步）添加导航逻辑

app.component.ts

export class AppComponent  {
  name = 'Changing the navigation';
  currentPage = 'teacher';
  constructor(private router: Router){}

  navigatePageTo(page) {
    this.currentPage = page;
    this.router.navigate([page]);
  }
}

第3步）添加相应的链接

app.component.html

<div class="sidenav">
  <a (click)="navigatePageTo('teacher')" [class.activeLink]="currentPage === 'teacher'">Teacher</a>
  <a (click)="navigatePageTo('student')" [class.activeLink]="currentPage === 'student'">Student</a>
</div>
<div class="main-content">
  <h1>{{name}}</h1>
  <hr>
</div>
<router-outlet></router-outlet>

您可以检查Demo Here

希望这就是您的期望。