时间戳

首页 > 解决方案 > Angular 7 嵌套路由，无法匹配任何路由。网址段错误

angular - Angular 7 嵌套路由，无法匹配任何路由。网址段错误

问题描述

我正在尝试更改现有应用程序的路由。该应用程序有许多我没有掌握的概念，例如延迟加载和高级路由技术，所以我希望有人能帮助我。

我有以下层次结构：

 components(folder)
    operador (component)
       criar (component)
       atualizar (component)
       operador.module.routing.ts

Operator.module.routing.ts 是这样的

 const routes: Routes = [
  {path: '', component:  OperadorComponent,

  children: [
    {path: 'criar', component: CriarComponent}

  ]
},

 ];

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

}

当我在操作员组件中有这样的路由器时，它不会导航到 criar 组件。

  <a routerLink="criar" >

我在 Chrome 上遇到以下错误：

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。URL 段：'dash/operadores/criar' 错误：无法匹配任何路由。URL 段：ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError 处的“dash/operadores/criar”

编辑以包含更多代码。

我在应用程序的根目录中有以下文件，app-routing.module.ts。

   import { HomeComponent } from './components/home/home.component';
   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';


const appRoutes: Routes = [ 
 {path: '', loadChildren: 'src/app/components/entrar- 
app/entrarapp.module#EntrarModule'},
  {path: 'dash', component: HomeComponent},

];

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

标签： angular

解决方案

所以我创造了一个适合你的。

应用程序路由.module.ts

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

const routes: Routes = [ 
{path: '', loadChildren: () => 
     import('./entrarapp/entrarapp.module').then(m => m.EntrarModule)}
];

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

entrapapp-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { OperadorComponent } from './operador/operador.component';
import { CriarComponent } from './criar/criar.component';
import { TestComponent } from './test/test.component';

 const routes: Routes = [
  {path: '', component:  OperadorComponent,
    children: [
      {path: '', component: TestComponent},
      {path: 'criar', component: CriarComponent}
    ]
},
 ];


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports:[RouterModule],
  declarations: []
})
export class EntrarAppRoutingModule { }

operator.component.html

  <a routerLink="/criar" >Criar</a>
    <router-outlet></router-outlet>

您可以在此处找到工作示例

推荐阅读