在Angular中,可以使用通配符路由来替换子路由。通配符路由是指当没有匹配的子路由时,将会加载一个特定的组件或页面。
以下是一个示例解决方法:
首先,在路由模块中定义通配符路由:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { NotFoundComponent } from './not-found.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: '**', component: NotFoundComponent } // 通配符路由
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上述代码中,通配符路由使用了双星号(**)作为路径,表示当没有匹配的子路由时,将会加载NotFoundComponent组件。
接下来,创建相应的组件文件:
home.component.ts:
import { Component } from '@angular/core';
@Component({
template: 'Home Component
'
})
export class HomeComponent {}
not-found.component.ts:
import { Component } from '@angular/core';
@Component({
template: 'Page not found
'
})
export class NotFoundComponent {}
最后,在根模块中引入路由模块:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [BrowserModule, AppRoutingModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
通过上述步骤,当没有匹配的子路由时,将会加载NotFoundComponent组件,显示"Page not found"。
请注意,通配符路由应该是路由模块中的最后一个路由,以确保它是在没有其他匹配的子路由时才被调用。
下一篇:Angular通配符路由中的斜杠