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

Question

我有两个 Angular 组件，分别称为 list 和 list-detail。我还有两个 models 用于 list 和 list-detail。以下是模型:

模型列表-详细信息:

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
• list 2
• 列表 3

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

这就是我的 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

试试这个:

1. 在路由路径中设置一个键 { path: 'list-detail/:selected', component: ListDetailComponent }

2. 在组件中订阅以路由参数并查找该键

constructor(private route: ActivatedRoute)

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