1

我在 Angular (v7) 项目中有列表和详细信息组件，我使用以下方法打开记录的详细信息：

列表组件.html：

<a routerLink="/details/" [state]="{ id: row.Id }">{{ row.Title }}</a>


详细信息组件.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
    }
}

我遇到了两个需要解决的问题：

1) 我需要在页面刷新时停留在同一个详细信息页面上。

2) 我想通过单击按钮打开记录的详细信息页面，例如将 id 参数附加到详细信息页面的地址。

是否可以在 Angular 7 中以智能的方式解决这两个问题？

4

1 回答 1

2

您应该id在 url 中添加作为路由器参数。并在您routing-module的与详细信息组件相对应的新路线。

您可以在官方文档中看到这一点，他们在其中实现了带有路由的列表/详细信息视图。

基本上会是这样的

<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
    }
}
于 2019-06-11T12:43:37.130 回答