将点击的项目作为路由参数传递给 Angular 中的子组件

Question

我有两个 angular 组件，名为 list 和 list-detail。 list 和 list-detail 我也有两个 models。以下是型号：

型号列表-详细信息：

export class ListDetail {
    id: number;
    name: string;
}

机型列表：

import { ListDetail } from './list-detail';

export class List {
    id: number;
    name: string;
    items: ListDetail[];
}

在我的 list 组件中，我循环整个列表并像这样显示它：

组件列表模板：

<div class="list">
    <div class="list__item" *ngFor="let item for list">
        {{item.name}}
    </div>
</div>

我的输出是这样的：

列表 1
列表 2
列表 3

现在我的目标是，当我点击一个 list 时，路由到列表详细信息组件并将点击的项目作为路由参数传递，这样我就可以在那里显示它。

这是我的 appRoutes 的样子：

const appRoutes: Routes = [
    { path: 'list', component: ListComponent,
        childrend: [
            { path: 'list-detail', component: ListDetailComponent }
        ]
    }
];

所以我尝试按照 list 组件的模板将点击列表作为 route parameter 传递给 list-detail 组件，我发现在互联网上的一个问题中：https://angular-2-training-book.rangle.io/handout/routing/query_params.html

<div class="list__item" *ngFor="let item for list" (click)="let selected = item" [routerLink]="['./list-detail', selected]">

我添加了一个 (click) 来将点击的项目分配给一个新变量，然后使用 [routerLink] 路径和 selected 将其传递给 list-detail .

问题： 现在我不明白，我应该如何在我的 list-detail 组件中使用 parameter 来在模板上显示它的名称list-detail 组件？我尝试将 list 传递给子组件的方式是否正确？希望得到一些帮助。

Answer 1

试试这个：

在路由路径中设置一个键{ path: 'list-detail/:selected', component: ListDetailComponent }
在组件中订阅以路由参数并查找该密钥

constructor(private route: ActivatedRoute)

ngOnInit() {
  this.route.params.subscribe(params => this.selected = params['selected']);
}

Answer 2

RouterLink 仅适用于 <a> 标签。您应该改为在单击列表时调用组件中的函数。有关在组件中触发导航的信息，请参阅 https://angular.io/api/router/Router#navigate。
您只能将字符串作为路由参数传递。因此，与其传递对象 item，不如尝试传递 item.id 或 item.name。

将点击的项目作为路由参数传递给 Angular 中的子组件

Pass clicked item as route parameter to sub component in Angular

html

javascript

parameter-passing

angular2-routing

angular