Как передать данные из Sidemenu на другую страницу при навигации - PullRequest
Новая
       9

Как передать данные из Sidemenu на другую страницу при навигации

0 голосов
/ 29 января 2019

так что в основном у меня есть два типа пользователей: учитель и ученик, так как я должен показывать разные экраны профиля в зависимости от типа пользователя.

мое Sidemenu находится в app.components.ts

1 Ответ

0 голосов
/ 29 января 2019

Предполагая, что вы хотите перейти на соответствующие страницы,
Вы можете сделать это, используя функцию router.navigate из компонента или используя routerLink из самого HTML.
Мы создадим отдельныйпапки для учителя и ученика и компоненты и соответствующие файлы CSS и HTML.

Шаг 1) Мы добавим маршруты вышеуказанных компонентов в файл app-module.routings.ts, который мы должны создать вручную в папке приложения нашего приложения

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>

Вы можете проверить Демо Здесь

Надеюсь, это то, что вы ожидали.

...