Question

我正在尝试更改现有应用程序的路由。该应用程序具有许多我不熟悉的概念，例如延迟加载和先进的路由技术，因此希望有人可以帮助我。

我具有以下层次结构：

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

Operador.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上看到以下错误：

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“破折号/操作符/批评” 错误：无法匹配任何路线。网址段：“破折号/操作符/批评” 在ApplyRedirects.push ../ node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError

已编辑以包含更多代码。

我在应用程序的根目录下有以下文件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{}

Answer 1

尝试<a routerLink="../criar" >原始文件试图查找'dash / operadores / criar'而不是'dash / criar'，因此它需要'../'来导航当前路径下的一个目录（我相信这是根据所发布内容的正确路线）。

Answer 2

所以我创建了一个适合您的东西。

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

entrarapp-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 { }

operador.component.html

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

您可以找到工作示例here

Angular 7嵌套路线，无法匹配任何路线。网址细分错误

2 个答案: