0

我正在尝试使用 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] 绑定，但是当我这样做时，无论它来自哪里，它都没有显示任何选择......

4

1 回答 1

0

有一个 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>
于 2019-03-25T20:39:53.347 回答