Angular 7 CoreUI：将路由器用于分支 URL 图像链接

Posted 2023-02-22

【中文标题】Angular 7 CoreUI：将路由器用于分支 URL 图像链接

【英文标题】：Angular 7 CoreUI : use router for branch URL image link

【发布时间】：2019-07-19 18:21:31

【问题描述】：

在the coreui admin 模板的app-header 组件中，<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"   >
   </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>

感谢您的帮助

【参考方案1】：

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

【参考方案2】：

尝试使用 routerLink 代替 href： 示例

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

【讨论】：

谢谢，但我使用的组件正在生成 HTML 标记“A”，我无权访问代码。我只能发送输入。

【参考方案3】：

您可以在<a>中使用点击功能如下

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

并按如下方式处理您的 ts 中的点击功能

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

  

【讨论】：

谢谢，但我使用的组件正在生成 HTML 标记“A”，我无权访问代码。我只能发送输入。

可以在@Input() navbarBrandHref 中获取url 链接，并传入(click)="navigate(navbarBrandHref, $event)"