在Angular 6中,可以通过使用路由守卫和动态路由配置来根据父路由参数设置子路由组件。
首先,创建一个父组件,并在父组件的路由配置中定义参数。假设父组件为ParentComponent
,参数为parentId
。
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';
const routes: Routes = [
{ path: 'parent/:parentId', component: ParentComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
接下来,创建一个子组件,例如ChildComponent
。
// child.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-child',
template: `Child Component - {{ parentId }}
`
})
export class ChildComponent implements OnInit {
parentId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.parentId = this.route.snapshot.paramMap.get('parentId');
}
}
在父组件中,可以使用
标签来显示子组件。
Parent Component
然后,在父组件的路由配置中,添加子路由配置,并使用路由守卫来根据父路由参数设置子路由组件。
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
const routes: Routes = [
{
path: 'parent/:parentId',
component: ParentComponent,
children: [
{ path: 'child', component: ChildComponent, canActivate: [ChildGuard] }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
最后,创建一个路由守卫,例如ChildGuard
,以根据父路由参数来决定是否激活子路由。
// child.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ChildGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {
const parentId = next.params.parentId;
// 根据父路由参数设置是否激活子路由
if (parentId === 'some-value') {
return true;
} else {
return false;
}
}
}
这样,当访问父组件的路由路径为/parent/:parentId
时,根据父路由参数的值来设置是否激活子路由/parent/:parentId/child
。