Angular路由器使用路径来确定将哪个组件呈现给用户,因此路径匹配是非常重要的。
路径匹配是通过路由器的配置文件进行的,我们可以使用Angular的RouterModule来配置路由器,下面的示例代码给出了一个简单的路由器配置:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
在上面的示例中,我们定义了三个路由:'home'、'about'和'contact',并将它们分别映射到了HomeComponent、AboutComponent和ContactComponent组件。
路由器将根据浏览器URL中的路径来确定要呈现哪个组件,如果路径匹配任何一个定义的路由,路由器就会呈现相应的组件。例如,如果URL是'http://localhost:4200/about' ,那么Angular路由器将会展现AboutComponent组件。
如果我们想做更高级的路径匹配,路由器也支持使用通配符和参数来匹配路径。例如,如果我们想在路由器中添加一个可选的ID参数,我们可以将路由定义如下:
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'product/:id', component: ProductComponent }
];
在上面的示例中,我们添加了一个名为'id'的参数,并将其作为路由路径的一部分。我们可以在ProductComponent中访问该参数,例如:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-product',
template: `
Product Details
Product ID: {{ productId }}
`
})
export class Product