Question

在the coreui admin模板的app-header组件中，<a>的href属性为“”，它提供localhost：xxxx来创建到根的导航。

我想通过使用routerLink来避免刷新整个页面，该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>

感谢您的帮助

Answer 1

尝试使用routerLink代替href：例子

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

Answer 2

您可以按以下方式在<a>中使用点击功能

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

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

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

  }

Answer 3

将ggplot(SledESsplittimes2, aes(x = Split_time, y = ES, col = Group)) + geom_point()更新为@coreui/angular
并使用^2.4.5代替navbarBrandRouterLink

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

3 个答案: