Question

我正在尝试使用KendoUI中的PanelBar进行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]绑定，但是当我这样做时，无论来自何处，它都不会显示任何选择。

Answer 1

有一个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>

Kendo Angular用户界面-如何根据当前路线选择PanelBar

1 个答案: