Question

我正在尝试执行以下操作：

加载名为“Make.component”的组件
我希望有这样的东西：
<button *ngIf="for make in makes" (click)="loadModelsComponent({{ make.id }})"> {{make.name}} </button>
当Models.component正在加载时，'卸载'（或删除）Make.component。

基本上，我在这里要描述的内容如下：
每个'Make'都有一个按钮，它有一个唯一的id（在make.id中），当点击这个按钮时，我希望它加载组件2，Models.component（ - 注意Makes和之间有关系）通过Make.id模型，因此我需要将'make.id'传递给Models.component。

我相信我可以通过路由来做到这一点，只是不确定如何正确执行。非常感谢代码片段，概念和建议。

相关：我打算使用服务（访问Edmunds的API）来获取这些数据，所以我需要将make.id传递给模型（.component）._ myApiService.getModels（make.id）[pseudocode]

Answer 1

由于您参考路由，我假设您的意思是当您单击按钮时，您希望路由到常规配置的路由，并将一些数据传递给该新组件。

我是这样做的：假设你已经配置了路由（就像任何其他路由一样），在你的按钮点击处理程序中，你可以这样做（假设你注入了路由器）：

this.router.navigate ( [ '/theRoute', { message: 'somedata' } ] );

以这种方式使用接收组件（假设您注入ActivatedRoute）：

this.route.snapshot.params [ 'message' ];

我在这里和那里做到这一点，让它变得非常简单。避免必须使用“：token”格式以及配置中的所有格式，您只需简单地配置路线：

{ path: 'myfabroute', component: MyFabComponent }

再次，还有其他方法。这就是我最近倾向于的。

Angular2从<button>加载/卸载组件

1 个答案: