代码之家 › 专栏 › 技术社区 › Jack

角度:如何打开Details组件并在ButtonClick上传递id

angular-routerlink angular-routing angular-ui-router angular

Jack · 技术社区 · 5 年前

我在Angular(v7)项目中有List和Details组件,我使用以下方法打开记录的详细信息:

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

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

2) 我想用一个按钮点击打开一个记录的详细信息页面,例如在详细信息页面的地址上附加id参数。

0 回复 | 直到 5 年前

Korfoo 5 年前

你应该添加 id 作为url中的路由器参数。在你的 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
    }
}

推荐文章

J.TrLu · 如何在AngularJS的ui路由器中传递查询参数?

6 年前

uniXVanXcel · AngularJS子视图未显示

6 年前

Dharmendra Rao · 如何在角度为5的url上获取post变量的值

6 年前

newman · 是否可能在同一锚定标记上有routerLink和click事件?

6 年前

Mohamed Ali Lassoued · 按钮元素上的routerLink不工作

6 年前

tom clack · 角度url不区分大小写

6 年前

niraja k · Angular 2中的路由将数据从路由/HTML传递到组件

6 年前

MFARID · angular中的多个应用程序组件

6 年前

user8518202 · angularjs ui rouetr错误,因为控制器未注册

6 年前

Cashew · 将控制器添加到UI路由器状态时,AngularJS中出现模块错误

6 年前