在Angular 7中,可以使用路由链接中的参数来传递数据。以下是一个解决该问题的示例代码:
首先,在你的组件中定义一个路由参数。例如,在app.component.ts
中定义一个名为userId
的路由参数:
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
template: `
User Details
User ID: {{ userId }}
`
})
export class AppComponent {
userId: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.userId = params['userId'];
});
}
}
然后,在你的路由配置中,将路由参数添加到路由链接中。例如,在app-routing.module.ts
中定义一个名为user-details
的路由,并将userId
参数添加到路由链接中:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const routes: Routes = [
{ path: 'user-details/:userId', component: AppComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上述代码中,user-details/:userId
定义了一个路由链接,其中:userId
是路由参数。
最后,在你的模板中,通过使用routerLink
指令来创建带有参数的路由链接。例如,在app.component.html
中添加一个带有参数的路由链接:
User Details
在上述代码中,通过将['/user-details', '123']
传递给routerLink
属性,将路由链接设置为/user-details/123
,其中123
是路由参数的值。
当你点击User Details
链接时,将导航到/user-details/123
路由,并且AppComponent
组件将显示User ID: 123
。
这就是在Angular 7中解决路由链接中的参数问题的示例代码。希望对你有帮助!