Question

我有两个名为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
清单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。

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

Answer 1

试试这个：

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

＆＃13;

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

＆＃13;

Answer 2

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

将点击的项目作为路径参数传递给Angular

2 个答案: