首页 > 解决方案 > Angular 7 CoreUI:将路由器用于分支 URL 图像链接

问题描述

在coreui 管理模板的 app-header 组件中,href 属性<a>是“”,它提供了 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>

在 default-layout.component.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>

谢谢你的帮助

标签: angularangular-ui-routerangular-templatecore-ui

解决方案


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


推荐阅读