在Angular 8中,可以通过在路由配置中定义路由参数,然后在路由数据中使用它们。下面是一个示例解决方法:
首先,在路由模块(通常是app-routing.module.ts)中定义带有参数的路由:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my.component';
const routes: Routes = [
{
path: 'my/:id', // 定义参数id
component: MyComponent,
data: { title: 'My Page' } // 在路由数据中使用参数
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
然后,在组件中使用参数和路由数据:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my',
template: `
{{ title }}
Parameter ID: {{ id }}
`
})
export class MyComponent implements OnInit {
title: string;
id: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
// 获取路由数据中的title
this.title = this.route.snapshot.data.title;
// 获取路由参数id
this.id = this.route.snapshot.params.id;
}
}
在上面的示例中,定义了一个路由参数id,并在路由数据中使用了它。然后,在MyComponent组件中,使用ActivatedRoute来获取路由数据和参数。在ngOnInit生命周期钩子中,使用ActivatedRoute的snapshot属性获取路由数据和参数的值。
以上就是使用Angular 8路由参数在路由数据中的解决方法,希望对你有帮助!