angular - 在 coreUI 中使用 app-sidebar-nav 时如何操作 routerLink？

Question

我正在使用 CoreUI app-sidebar-nav（链接在这里）重定向到我的应用程序的各个部分。但是，子路由会附加到当前 url，而不是附加到应用程序的根目录。

我在同一个应用程序中的工具栏上遇到了类似的问题，在这里解决了（经过这里提到的一些修改），但在这种情况下，我使用的是 CoreUI 模板，并想知道是否有办法可以操作routerLink 的操作方式与我在工具栏中的操作方式相同。这可能有助于确定routerLink居住地

这是我的代码：

组件.ts

import { Component, OnInit } from '@angular/core';
import { navItems } from 'src/app/views/core/side-nav/_nav';
/**
* This component renders the UI of the side-nav component.
*/
@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.scss']
})
export class SideNavComponent implements OnInit {
  /**
  * The constructor initializes the navItems meta.
  */
  constructor(private nav: navItems) { }
  /**
  * This property comprises the navItems meta.
  */
  public navItems = this.nav.exportData();
  /**
  * This flag indicates wether the sidebar is minimized or not.
  */
  public sidebarMinimized = true;
  /**
  * This property is an eventlistener.
  */
  private changes: MutationObserver;
  /**
  * This property contains the document body.
  */
  public element: HTMLElement = document.body;

  /**
  * This method observes the changes in the DOM, and minimizes and maximizes the
  * side nav accordingly.
  */
  ngOnInit() {
    this.changes = new MutationObserver((mutations) => {
      this.sidebarMinimized = document.body.classList.contains('sidebar-minimized');
    });
    this.changes.observe(<Element>this.element, {
      attributes: true
    });
  }

}

navitems ts文件

import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { Injectable } from '@angular/core';
import { DynamicRoutingService } from 'src/app/services/dynamic-routing/dynamic-routing.service';
import { Router } from '@angular/router';
import { DummyComponent } from 'src/app/views/dummy/dummy.component';
import { LogoutComponent } from 'src/app/views/logout/logout.component';

@Injectable({
  providedIn: 'root'
})

/**
* The purpose of this class is to provide an object containing the translated names
* for the categories in the nav bar, based on the translation file found in assets/i18n
*
* @class navItems
*/
export class navItems {

  /**
  * Object containing the translated names and their respective icons
  * @property {array} navData
  */
  navData: Array<{ name: string, url: string, icon: string }>;

  /**
  * constructor for toolbar component is responsible for initializing translatePipe, dynamic routing and router,
  * as well as adding routes dynamically to the router and the dynamicRouting service
  * @param translate
  * @param router
  * @param dynamicRouting
  *
  */
  constructor(private translate: TranslatePipe, private router: Router, private dynamicRouting: DynamicRoutingService) {
    this.router.config.unshift(
      { path: 'knowledge-base', component: DummyComponent, pathMatch: "full" },
      { path: 'home', component: DummyComponent },
      { path: 'profile', component: DummyComponent },
      { path: 'settings', component: DummyComponent },
      { path: 'logout', component: LogoutComponent}
    );
    this.dynamicRouting.addItem({ text: "home", path: "home", icon: "icon-drop" });
    this.dynamicRouting.addItem({ text: "knowledge_base", path: "knowledge-base", icon: "icon-pencil" });
    this.dynamicRouting.addItem({ text: "profile", path: "profile", icon: "icon-puzzle" });
    this.dynamicRouting.addItem({ text: "settings", path: "settings", icon: "icon-cursor" });
    this.dynamicRouting.addItem({ text: "logout", path: "logout", icon: "icon-arrow-left-circle" });
  }

  /**
  * When called this method sets the required data into the navData object
  * @param
  * @method exportData
  * @return
  */
  exportData() {
    this.navData = [];
    let rawData = this.dynamicRouting.getLinks();
    let self = this;
    rawData.forEach(function(data) {
      let text = self.translate.transform("generic[nav_bar][categories][" + data.text + "][label]");
      self.navData.push({ name: text, url: data.path, icon: data.icon });
    });
    return this.navData;
  }
}

组件.html

<app-sidebar [fixed]="true" [display]="'lg'">
  <app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="sidebarMinimized"></app-sidebar-nav>
  <app-sidebar-minimizer class="custom-padding-bottom"></app-sidebar-minimizer>
</app-sidebar>

标签： angulartypescriptcore-ui