angular - 动态路由已添加到路由器但不起作用

Question

我在 Angular 6 中创建了一个应用程序，登录后将用户带到主页。此页面在顶部导航栏(称为 toolbar )和左侧侧边栏(称为 side-nav )上包含多个链接。我创建了一个自定义动态路由服务，可以为 html 模板添加链接及其标签。

使用 router.config.unshift 将路径添加到路由器，并且我已经验证这些路径是否已正确添加到 config 下当我在控制台中登录路由器时。

我的应用程序的登录页面具有根路径(即 ' ' )和 Main登录后页面路径为/main (下面添加了路由器配置)。

我遇到的问题似乎有两个部分:

1. 每当我点击 side-nav 上的链接时或toolbar ，地址栏上的 url 显示为 localhost.com:4200/main/<path>显示的页面是NotFoundComponent (即它找不到路线)。我不希望路径是 child的/main但根网址(即 ' ' )，因为导航栏将出现在每个页面上，这可能会出现类似 localhost:4200/main/<path>/<anotherpath>/<someotherpath>/<path> 的情况单击多个项目时，这是一个非常糟糕的设计。

2. 如果我尝试手动添加应用程序的路径，例如。 localhost:4200/<path>显示相同的结果( NotFoundComponent )。无论我做什么，它都找不到路径，即使在控制台中，当我登录路由器时它已经完美定义。

出于测试目的，我的所有路径都将我重定向到 DummyComponent .

这是我的代码，我正在分享我的 ToolbarComponent 的代码，并且侧边导航几乎是相同的，除了一些零碎的东西:

app.routing.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { LoginComponent } from 'src/app/views/login/login.component';
import { MainComponent } from 'src/app/views/main/main.component';
import { AuthGuardService } from 'src/app/services/auth-guard/auth-guard.service';
import { NotFoundComponent } from 'src/app/views/error/not-found/not-found.component';
/**
* Contains a list of routes to enable navigation from one view to the next
* as users perform application tasks
* @property {array} routes
*/
export const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'main',
    component: MainComponent,
    canActivate: [AuthGuardService]
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

动态路由.service.ts

import { Injectable } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';

@Injectable({
  providedIn: 'root'
})
/*
* This service will provide components with the ability to dynamically create
* routes within the application
*/
export class DynamicRoutingService {

  /*
  * Array for storing links
  *
  */
  private links = new Array<{ text: string, path: string, icon: string }>();

  constructor(private translate: TranslatePipe) { }

  /*
  * Method to fetch data
  *
  */
  getLinks() {
    if (this.links.length != 0) {
      return this.links;
    }
    else {
      throw new Error(this.translate.transform("generic[responses][error][404][002]"));
    }
  }

  /*
  * Method to store data
  *
  */
  addItem({ text, path, icon = null }) {
    try {
      this.links.push({ text: text, path: path, icon: icon });
    } catch (e) {
      throw new Error(this.translate.transform("generic[responses][error][400]"));
    }
  }

  /*
  * Method to remove a specific link
  *
  */
  removeItem({ text }) {
    if (this.links.length != 0) {
      this.links.forEach((link, index) => {
        if (link.text === text) {
          this.links.splice(index, 1);
        }
      });
    } else {
      throw new Error (this.translate.transform('generic[resposnes][error][404][002]'));
    }
  }

  /*
  * Remove all links from the array
  */
  clearAll() {
    this.links.length = 0;
  }
}

toolbar.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
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';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss'],
  providers: [DynamicRoutingService]
})

/**
* This component renders the Toolbar UI
*
*/
export class ToolbarComponent implements OnInit {

  /**
  * Object containing the translated names and their respective icons
  * @property {array} links
  */
  links: Array<{ text: string, path: 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 },
      { path: 'home', component: DummyComponent },
      { path: 'settings', component: DummyComponent }
    );
    this.dynamicRouting.addItem({ text: "home", path: "home" });
    this.dynamicRouting.addItem({ text: "knowledge_base", path: "knowledge-base" });
    this.dynamicRouting.addItem({ text: "settings", path: "settings" });
  }

  /**
  * Upon initialization this function fetches the links and inserts the translated
  * text and path to be used by the template
  *
  * @param
  * @return
  */
  ngOnInit() {
    this.links = [];
    let rawData = this.dynamicRouting.getLinks();
    let self = this;
    rawData.forEach(function(data) {
      let text = self.translate.transform("generic[toolbar][categories][" + data.text + "][label]");
      self.links.push({ text: text, path: data.path });
    });
  }

}

toolbar.component.html

<app-header
  [fixed]="true"
  [navbarBrandFull]="{src: 'assets/logo.png', width: 143, height: 36, alt: 'RT Logo'}"
  [navbarBrandMinimized]="{src: 'assets/logo2.png', width: 35, height: 35, alt: 'RT Logo'}"
  [sidebarToggler]="'lg'">
  <ul class="nav navbar-nav d-md-down-none" routerLinkActive="active">
    <li class="nav-item px-3" *ngFor="let link of links">
      <a class="nav-link" [routerLink]="link.path">{{ link.text }}</a>
    </li>
  </ul>
  <ul class="nav navbar-nav ml-auto">
  </ul>
</app-header>

Answer 1

已解决:问题出在我的模板中:需要修改传递给routerLink的值，example here和 solution here