Question

我在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中以聪明的方式解决这两个问题？

Answer 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
    }
}

Angular：如何打开Details组件并在ButtonClick上传递ID

1 个答案: