我在Angular(v7)项目中具有“列表”和“详细信息”组件,并使用以下方法打开记录的“详细信息”:
ListComponent.html:
<a routerLink="/details/" [state]="{ id: row.Id }">{{ row.Title }}</a>
DetailsComponent.ts:
import { Router, ActivatedRoute } from '@angular/router';
export class DetailsComponent {
constructor(private router: Router,
public activatedRoute: ActivatedRoute {
super();
this.id = this.router.getCurrentNavigation().extras.state.id; //get id parameter
}
}
我遇到了2个要修复的问题:
1)我需要在页面刷新时停留在相同的“详细信息”页面上。
2)我想使用按钮打开例如记录的“详细信息”页面,例如将id参数附加到“详细信息”页面的地址。
是否可以在Angular 7中以聪明的方式解决这两个问题?
答案 0 :(得分:1)
您应该在网址中添加id
作为路由器参数。并在您的routing-module
中创建一条与详细信息组件相对应的新路线。
您可以在官方文档中看到此here,他们在其中使用路由来实现列表/详细信息视图。
基本上就是这样
<a routerLink="/details/{{row.Id}}">{{ row.Title }}</a>
和
import { Router, ActivatedRoute } from '@angular/router';
export class DetailsComponent {
constructor(private router: Router,
public route: ActivatedRoute) {
super();
this.id = this.route.snapshot.paramMap.get('id'); //get id parameter
}
}