arrays - How do I transfer the array to the routing parameter?
问题描述
*I'm making a angular project (version 6+). I want to transfer array parameter, using routing. *
const routes: Routes = [
{
path: 'books',
component: BookComponent
}
,
{
path: 'books/:id',
component: BookDetailComponent
},
...
解决方案
There are two ways you can use,
Method 1:
HTML
<a routerLinkActive="active" [routerLink]="['/home', userIDs.join()]">Home</a>
TS:
userIDs: Array<number> = [1, 3, 4];
Home component typescript:
export class HomeViewComponent implements OnInit {
userIDs: Array<number> = [];
constructor(private router: ActivatedRoute) { }
ngOnInit() {
this.router.params.subscribe(params => {
this.userIDs = params['ids'].split(',');
});
}
}
Router Module:
path: 'home/:ids', component: HomeViewComponent }
Method 2 (Using queryParams):
You don't need to add anything into router module as we are doing in above method.
HTML
<a routerLinkActive="active" [routerLink]="['/home']" [queryParams]="{ids: userIDs}">Home</a>
TS
userIDs: Array<number> = [1, 3, 4];
Home component typescript:
export class HomeViewComponent implements OnInit {
userIDs: Array<number> = [];
constructor(private router: ActivatedRoute) { }
ngOnInit() {
this.router.queryParams.subscribe(p => {
this.userIDs = p.ids;
});
}
}
推荐阅读
- python - 在 pyspark 中每隔 1 小时从 postgres DB 读取数据
- java - 转换代码以获取带有第二个大括号的列表
- android - Firebase 功能未触发实时数据库
- python - 本地网络调用中的 Python 自动连接 WinError 10061
- dolphindb - dolphindb中两条两条曲线可以重叠吗?
- java - openAPI 生成器错误:无法处理模型“日期时间”。请确保您的架构是正确的
- java - 没有任何唯一ID的多个div
- typescript - Next.js typescript自定义文档错误:TypeError:没有'new'就无法调用类构造函数文档
- android - Android 找不到活动 ActivityRecord 的主窗口
- javascript - 使用 ibm watson 在聊天机器人中发送获取请求时如何解决错误?