Question

我正在尝试创建一个新的module功能。我为功能模块设置了新的路由，但是此处定义的路由不起作用。

我的功能模块是WSmodule。

wsmodule.routing.module.ts

const appRoutes: Routes = [
    {
        path: "workspace", component: WSHomeComponent
    }
];

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

wsmodule.module.ts

@NgModule({
  imports: [
    CommonModule,
    WsModuleRoutingModule
  ],
  declarations: [WSHomeComponent]
})
export class WSModuleModule { }

app.routing.module.ts

const appRoutes: Routes = [

    { path: "", component: HomeComponent },

    {
       path: "notfound", component: NotFoundComponent
    },
    {
        path: "**", redirectTo: '/notfound'
    }
];

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

app.module.ts

imports[
    WSModuleModule,
    AppRoutingModule
]

现在，当我尝试打开URL http://localhost:4200/workspace时，它将被重定向到http://localhost:4200/notfound。这意味着我的wsmodule路线未被识别。

Answer 1

这是因为您没有指定任何路由来加载功能模块(WSModule)。在功能模块中指定路由时，通常通常通过在根级别使用路由中的loadChildren属性来延迟加载。

Answer 2

如果您不需要延迟加载，只需在应用模块中引用wsmodule.module.ts。

这是一个小例子：https://stackblitz.com/edit/angular-nnqwum

小心依赖项：

在wsmodule.routing.module.ts中，检查您是否拥有

import { WSHomeComponentComponent } from './wshome-component/wshome-component.component';``

在wsmodule.module.ts中，检查您是否拥有：

import { WSHomeComponentComponent } from './wshome-component/wshome-component.component';
import { WsModuleRoutingModule } from './wsmodule.routing.module';

然后在app.module.ts中，检查是否已导入模块wsmodule.module.ts：

import { WsmoduleModule } from './wsmodule/wsmodule.module';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    WsmoduleModule,
    AppRoutingModule
  ]...

Answer 3

这是app.routing.module.ts

const appRoutes: Routes = [
    {
        path: '',
        component: HomeComponent,
        data: {
            title: 'Home'
        },
        children: [
            {
                path: 'ws',
                loadChildren: '.<path to WsModuleRoutingModule >#WsModuleRoutingModule '
            },
        ],
    },
    {
        path: "notfound", component: NotFoundComponent
    },
    {
        path: "**", redirectTo: '/notfound'
    }
];

这是wsmodule.routing.module.ts

const routes: Routes = [
    {
        path: "",
        data: {
            title: "Ws"
        },
        children: [
            {
                path: "workspace",
                component: WSHomeComponent,
                data: {
                    title: "WS"
                }
            }
        ]
    }
]

您可以通过以下方式访问此

http://localhost:4200/#/ws/workspace

Answer 4

通配符路由在根模块中不起作用。您需要为此创建一个单独的路由模块并最后加载

ws-home.component.ts

import { Component } from '@angular/core';


@Component({
    templateUrl: './ws-home.component.html',
})
export class WSHomeComponent
{
}

wsmodule.routing.module.ts

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

import { WSHomeComponent } from './ws-home.component';

const routes: Routes = [
  {   path: 'workspace',   component: WSHomeComponent   },
];

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

wsmodule.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { WsModuleRoutingModule } from './wsmodule.routing.module';
import { WSHomeComponent } from './ws-home.component';


@NgModule({
  declarations: [WSHomeComponent],
  imports: [
    CommonModule,
    WsModuleRoutingModule
  ],
  providers: [],
})
export class WSModuleModule { }

wildcard-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotfoundComponent } from './notfound.component';

const routes: Routes = [
  { path: 'notfound',   component:NotfoundComponent },
  { path: '**', redirectTo:'/notfound' }

];

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

app-routing.module.ts

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


const routes: Routes = [
  { path: '',   component:HomeComponent },
];

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

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { WildcardRoutingModule} from './wildcard-routing.module';

import { AppComponent } from './app.component';
import { HomeComponent} from './home.component';
import { NotfoundComponent} from './notfound.component';

import { WSModuleModule} from './feature1';

@NgModule({
  declarations: [
    AppComponent,HomeComponent,NotfoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    WSModuleModule, 
    WildcardRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请参阅此答案

Angular 2 Router Wildcard handling with child-routes

Angular Router Wild card routes

路线不适用于特征模块的角度

4 个答案: