Angular 7 CoreUI: используйте маршрутизатор для ссылки на изображение URL-адреса ветки

В компоненте заголовка приложения шаблона администратора coreui атрибут 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>

Спасибо за любую помощь


angular core-ui angular-ui-router angular-template
person pti_jul    schedule 26.02.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

обновить @coreui/angular до ^2.4.5
и использовать navbarBrandRouterLink вместо navbarBrandHref

person xidedix    schedule 24.05.2019

arrow_upward
0
arrow_downward

Попробуйте использовать routerLink вместо href: Пример

<a routerLink="/dashboard"></a>
person Oleg    schedule 26.02.2019
comment
Спасибо, но компонент, который я использую, генерирует HTML-тег A, и у меня нет доступа к коду. Я могу только отправлять входные данные. - person pti_jul; 26.02.2019

arrow_upward
0
arrow_downward

Вы можете использовать функцию щелчка в <a> следующим образом

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

и обработайте функцию щелчка в вашем ts следующим образом

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

  }
person Jeyam Prakash    schedule 26.02.2019
comment
Спасибо, но компонент, который я использую, генерирует HTML-тег A, и у меня нет доступа к коду. Я могу только отправлять входные данные. - person pti_jul; 26.02.2019
comment
вы можете получить URL-ссылку в @Input() navbarBrandHref и передать ее в (щелчок)=navigate(navbarBrandHref, $event) - person Jeyam Prakash; 26.02.2019