Question

我添加了一个着陆组件，其中显示了一个着陆页和一个按钮，该按钮在单击时会重定向到/ recipes。当所有路径都在单个模块中时，它可以正常工作。但是当它分成不同的路由模块时，它在点击时不会重定向到/ recipes。

这是我的代码的 appRouting.module.ts

只有当我指定{路径：＆＃39;食谱＆＃39; appRotuing.module中的component：....}而不是recipesRouting.module

import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
import {ShoppingListComponent} from "../shopping-list/shopping-list.component";
import {DeactivateGuardService} from "../shared/deactivateGuard.service";
import {ShoppingListEditComponent} from "../shopping-list/shopping-list-edit/shopping-list-edit.component";
import {SignupComponent} from "../auth/signup/signup.component";
import {SigninComponent} from "../auth/signin/signin.component";
import {LandingComponent} from "../landing/landing/landing.component";
import {RecipesComponent} from "../recipes/recipes.component";


const appRoutes:Routes=[

  {path:'shoppingList',component:ShoppingListComponent,children:[
    {path:'',component:ShoppingListEditComponent,canDeactivate:[DeactivateGuardService]}
  ]},
  {path:'signup',component:SignupComponent},
  {path:'signin',component:SigninComponent},
  {path:'**',component:LandingComponent}

]
@NgModule({
  imports:[
    RouterModule.forRoot(appRoutes),

  ],
  exports:[RouterModule],
})
export class AppRoutingModule{
}

RecipesRouting.module.ts

import {RouterModule, Routes} from "@angular/router";
import {RecipesComponent} from "./recipes.component";
import {ActivateGuardService} from "../shared/activateGuard.service";
import {RecipeDetailComponent} from "./recipe-detail/recipe-detail.component";
import {RecipeStartComponent} from "./recipe-start/recipe-start.component";
import {RecipeEditComponent} from "./recipe-edit/recipe-edit.component";
import {DeactivateGuardService} from "../shared/deactivateGuard.service";
import {NgModule} from "@angular/core";
import {LandingComponent} from "../landing/landing/landing.component";


const recipeRoutes:Routes=[
  {path:'',component:LandingComponent,pathMatch:'full'},
  {path:'recipes',component:RecipesComponent,children:[
    {path:'',component:RecipeStartComponent},
    {path:'new',canActivate:[ActivateGuardService],component:RecipeEditComponent},
    {path:':id',component:RecipeDetailComponent},
    {path:':id/edit',canActivate:[ActivateGuardService],component:RecipeEditComponent,canDeactivate:[DeactivateGuardService]}
  ]},
]

@NgModule({
  imports:[
    RouterModule.forChild(recipeRoutes),
  ],
  exports:[
    RouterModule
  ]
})

export class RecipesRoutingModule{}

有什么方法可以解决这个问题吗？我应该在哪里放置着陆组件路线，以便在按下按钮时打开配方组件

先谢谢

Answer 1

我发现了问题。这是因为 appRouting.Module.ts 中的{path:'**',component:LandingComponent}，因为在appRoutingmodule中未指定/ recipes路由，它假定它不是有效路由并重定向到我在野外路由时指定的组件遇到了。

分成不同模块时无法加载路由

1 个答案: