Kendo UI for Angular - Как выбрать PanelBar на основе текущего маршрута - PullRequest
Новая
       37

Kendo UI for Angular - Как выбрать PanelBar на основе текущего маршрута

0 голосов
/ 25 марта 2019

Я пытаюсь использовать PanelBar из KendoUI для навигации моего приложения Angular.Когда вы попадаете на страницу и используете ее для навигации, она отлично работает со ссылками на маршрутизатор.Однако, если я перейду прямо на ссылку, это не сработает.Например, если я перехожу к http://localhost:4200/licenses, то на панели не отображается ничего выбранного, но если я перехожу к http://localhost:4200/, щелкните по той части лицензий, в которой он находится, и покажут, что она выбрана.Как сделать так, чтобы он отображался как выбранный, когда я нахожусь по этому URL-адресу, независимо от того, был ли он перемещен со страницы или по внешней ссылке?

Вот мой код компонента навигации: 

<kendo-panelbar>
  <kendo-panelbar-item title="Company Info" routerLink="/companydata"></kendo-panelbar-item>
  <kendo-panelbar-item title="Licenses" routerLink="/licenses"></kendo-panelbar-item>
  <kendo-panelbar-item title="Users" routerLink="/users"></kendo-panelbar-item>
  <kendo-panelbar-item title="Keynote Projects" routerLink="/knprojects" style="margin-bottom: 1em"></kendo-panelbar-item>
  <kendo-panelbar-item title="View Keynotes" expanded="true">
    <kendo-panelbar-item *ngFor="let project of Projects" title="{{ project.Name }}" routerLink="/knprojects/{{ project.ID }}"></kendo-panelbar-item>
  </kendo-panelbar-item>
</kendo-panelbar>

Я также пытался использовать привязку [selected], но когда я это сделал, она не показала никакой выбор, независимо от того, откуда она взялась ...

1 Ответ

0 голосов
/ 25 марта 2019

Для решения этой проблемы существует свойство Angular routerLinkActive. Используется с routerlink, и это означает, что нужно добавить некоторый класс в свойство, если активна ссылка на маршрутизатор.

Если ваш активный класс "активный", просто добавьте его в ваш пример: 

<kendo-panelbar>
  <kendo-panelbar-item routerLinkActive = "active" title="Company Info" routerLink="/companydata"></kendo-panelbar-item>
  <kendo-panelbar-item routerLinkActive = "active" title="Licenses" routerLink="/licenses"></kendo-panelbar-item>
  <kendo-panelbar-item routerLinkActive = "active" title="Users" routerLink="/users"></kendo-panelbar-item>
  <kendo-panelbar-item routerLinkActive = "active" title="Keynote Projects" routerLink="/knprojects" style="margin-bottom: 1em"></kendo-panelbar-item>
  <kendo-panelbar-item routerLinkActive = "active" title="View Keynotes" expanded="true">
    <kendo-panelbar-item routerLinkActive = "active" *ngFor="let project of Projects" title="{{ project.Name }}" routerLink="/knprojects/{{ project.ID }}"></kendo-panelbar-item>
  </kendo-panelbar-item>
</kendo-panelbar>
...