Пользовательский интерфейс Kendo для Angular — как сделать выбор PanelBar на основе текущего маршрута

Я пытаюсь использовать 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], но когда я это сделал, он не показывал никакого выбора, независимо от того, откуда он взялся...


angular kendo-ui kendo-panelbar
person sfaust    schedule 25.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для решения этой проблемы существует свойство 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>
person nevzatopcu    schedule 25.03.2019
comment
хм. Хорошо, это может сработать, но прямо сейчас я не создал класс для выбранного состояния, он просто использует то, что по умолчанию в кендо. Случайно не знаешь, что это такое? - person sfaust; 26.03.2019
comment
Вот пример этого telerik.com/kendo-angular -ui/components/layout/panelbar/routing - person nevzatopcu; 26.03.2019
comment
Хорошо, я думал, что пробовал это, но на этот раз я, должно быть, сделал что-то другое, потому что это сработало с выбранной привязкой. В итоге я поместил маршрутизатор в файл TS класса в качестве свойства, а затем добавил [selected]=router.url === '/companydata' и другие подобные привязки, и теперь он работает. Не уверен, что это предпочтительный способ получить маршрут, когда вы не проходите все возможные маршруты или нет, но он работает для меня. Если вы сделаете это ответом, я приму его. - person sfaust; 26.03.2019
comment
Еще одна ошибка, с которой я столкнулся, заключается в том, что если у вас есть пробелы в вашем маршруте, он будет кодировать их в свойстве router.url и, следовательно, не обязательно будет одинаковым при их сравнении и может бросить ключ в вещи. Только не ставьте пробелы в пути :) - person sfaust; 26.03.2019
comment
Раньше я не использовал панель кендо, но я исследовал для вас. На мой взгляд, другого пути нет. Я могу сказать, что вы можете использовать некоторые другие библиотеки для этой панели/вкладок. - person nevzatopcu; 26.03.2019