在Angular中,路由部分通配符可以用来匹配特定的路由模式,并将匹配的部分作为参数传递给组件。
下面是一个使用路由部分通配符的代码示例:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { NotFoundComponent } from './not-found/not-found.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'products/:id', component: ProductDetailComponent },
{ path: '**', component: NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-product-detail',
templateUrl: './product-detail.component.html',
styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
productId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.productId = this.route.snapshot.paramMap.get('id');
}
}
在上面的例子中,我们定义了三个路由规则:
在ProductDetailComponent中,我们使用ActivatedRoute服务来获取路由参数。通过调用snapshot.paramMap.get('id')方法,我们可以获取到id参数的值。
请注意,路由部分通配符必须放在路由规则的最后,以确保其他更具体的路径能够被优先匹配。