在Angular 7中,直接URL路由与ID可能无法正常工作的一个常见原因是没有正确配置路由器。以下是一种解决方法,其中包含代码示例:
首先,确保在应用程序的根模块(通常是app.module.ts)中引入了Angular的RouterModule,并将它添加到imports数组中:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot([]) // 这里是空数组,稍后将在路由配置中添加路由
],
// ...
})
export class AppModule { }
然后,在根模块中创建一个路由配置,将路由和组件进行关联。在这个示例中,我们假设有一个名为“UserDetailComponent”的组件来显示用户的详细信息,并且该组件将根据用户的ID进行加载。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserDetailComponent } from './user-detail.component';
const routes: Routes = [
{
path: 'user/:id', // 使用冒号指定参数化的URL段
component: UserDetailComponent
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
// ...
})
export class AppRoutingModule { }
最后,在需要使用直接URL路由和ID的组件中,使用路由器的ActivatedRoute服务来获取URL参数并处理它。在这个示例中,我们在UserDetailComponent中获取用户的ID。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user-detail',
template: `
User Detail
User ID: {{ userId }}
`
})
export class UserDetailComponent implements OnInit {
userId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.userId = params.get('id');
});
}
}
现在,当用户访问URL /user/1234 时,UserDetailComponent将被加载,并且userId将被设置为"1234"。
请注意,上述示例假设您的路由器已正确配置,并且在根模块中进行了正确的导入。如果您的应用程序中有其他路由和组件,请相应地调整路由配置和组件的代码。