Маршрутизатор активен, опция не работает angular7 - PullRequest
Новая
       9

Маршрутизатор активен, опция не работает angular7

0 голосов
/ 25 апреля 2020

У меня есть studentlist, studentdetails и student компоненты. Начиная с studentlist, если щелкнуть одну из строк, откроется компонент studentdetails с компонентом боковой панели.

Я хочу сохранить активную ссылку на вкладке компонента боковой панели при загрузке компонента studentdetails и student.

Точнее, у меня есть три маршрута. На вкладке компонента боковой панели вы можете go в path2, а затем path3: ссылки на пути: path1: locahost:4200/studentlist path2: locahost:4200/studentdetails/{id} path3: locahost:4200/student/{id}/{teacherid}

Component1: studentdetails Path: /studentdetails/{id}

После нажатия кнопки редактирования, присутствующей на странице studentdetails, открывается компонент student.

Компонент 2: student Путь: /student/{id}/{teacherid}

Не могли бы вы порекомендовать, как сохранить вкладку компонента боковой панели - «ученик» активным при переходе к пути: /student/{id}/{teacherid}

Добавление фрагментов файлов ts и html соответственно 

1) studentlist.ts

studentDetailsRouteUrl: string = 'student-details';

2)studentdetails.ts

 actionUrl:string =  'student'

3)sidebarcomponent.ts
studentDetailsRoute = 'student-details'
lblStudent = 'STUDENT'

1) studentlist.html

<tr *ngFor="let studnet of studentList">
   <td>
      <a [routerLink]="[studentDetailsRouteUrl]" [queryParams]="{ currentView: 'studentdetails'}"
      [routerLinkActive]="['active']"     
      [state]="{studentdetails: student, studentid:stundet.studentid}" >
      {{student.studentname}}
      </a>
   </td>
</tr>

2) studentdetails.html

<button [routerLinkActive]="['active']"  
[routerLink]="[ actionUrl, studentid, teacherid]" 
[queryParams]="{ currentView: 'editDetails'}">
Edit Button
</button>

3)sidebarcomponent.html 
<ul>
   <li>
      <a  [routerLink]="[ studentDetailsRoute]"
      [routerLinkActive]="['active']"
      [queryParams]="{ currentView: 'studentdetails'}"> {{lblStudent}} 
      </a>
   </li>
</ul>

4)student.html

code related to edit functionality and update in database.
...