Angular 7 CoreUI :使用路由器进行分支 URL 图像链接

Question

在coreui 管理模板的应用程序标头组件中，<a>的href属性为"，它为localhost：xxxx提供了创建到根目录的导航。

我想通过使用重定向到我决定的根页面(例如仪表板)的 routerLink 来避免整页刷新。

我能做到吗？似乎此模板不接受任何路由。

该组件生成此 HTML ：

<header class="app-header navbar">
<button appsidebartoggler="" class="navbar-toggler d-lg-none" type="button" ng-reflect-breakpoint=""><span class="navbar-toggler-icon"></span></button>
<a class="navbar-brand" href=""> <!-- Here is the href I'd like to altered -->
<img class="navbar-brand-full" src="assets/img/brand/logo-white.png" alt="CoreUI Logo" width="auto" height="auto">
</a>
...
</header>

在默认布局组件中.html我正在这样做：

<app-header [fixed]="true"
[navbarBrandFull]="{src: 'assets/img/brand/logo-white.png', alt: 'CoreUI Logo'}"
[sidebarToggler]="'lg'"
[asideMenuToggler]="'lg'">

当然，我可以像这样更改href：

<app-header [fixed]="true"
[navbarBrandFull]="{src: 'assets/img/brand/logo-white.png', alt: 'CoreUI Logo'}"
[sidebarToggler]="'lg'"
[asideMenuToggler]="'lg'"
[navbarBrandHref]="'/dashboard'">

但是当单击链接时，它会完全重新加载页面。我想要与由于routerLink引起的菜单导航相同的效果结果(更用户友好且速度更快，而不是完全重新加载)，它给出如下内容：

<a routerlinkactive="active" class="active nav-link" ng-reflect-ng-class="[object Object]" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">
<i class="nav-icon icon-speedometer"></i> Dashboard
<span class="badge badge-info" ng-reflect-ng-class="badge badge-info">NEW</span>
</a>

感谢您的任何帮助

Answer 1

将@coreui/angular更新为^2.4.5
并使用navbarBrandRouterLink而不是navbarBrandHref

Answer 2

尝试使用 routerLink 代替 href： 例

<a routerLink="/dashboard"></a> 

Answer 3

您可以在<a>中使用单击功能，如下所示

<a class="navbar-brand" (click)="navigate('/dashboard',$event)"></a>

并按如下方式处理 TS 中的单击功能

navigate(link, e) {
e.preventDefault(); 
this.router.navigate([link]);
}