Question

我已经创建了一个角度为6的应用程序，该应用程序在登录后会将用户带到主页。此页面在顶部的导航栏（称为toolbar）和在左侧的侧栏（称为side-nav）上均包含多个链接。我创建了一个自定义动态路由服务，该服务将为html模板添加链接及其标签。

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

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

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

每当我单击side-nav或toolbar上的链接时，地址栏上的URL就会向我显示localhost.com:4200/main/<path>，并且显示的页面是NotFoundComponent （即找不到路线）。我不希望路径是child的{{1}}而是根URL（即/main），因为导航条会出现在每个页面上，这可能会弹出一个点击' '这样的情况，点击多个项目，这是漂亮不好的设计。
如果我尝试手动将路径添加到应用程序，例如localhost:4200/main/<path>/<anotherpath>/<someotherpath>/<path>会显示相同的结果（localhost:4200/<path>）。不管我做什么，都根本找不到路径，即使在控制台中登录路由器时它已完全定义。

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

这是我的代码，我正在共享DummyComponent的代码，Side Nav几乎相同，只是有些零碎：

app.routing.ts ：

ToolbarComponent

dynamic-routing.service.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 { }

toolbar.component.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.html

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 });
    });
  }

}

Answer 1

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

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

1 个答案: