来自 <button> 的 Angular2 loading/unloading 组件

Question

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

加载名为 'Make.component' 的组件
在Make.component.html我想要这样的东西：
<button *ngIf="for make in makes" (click)="loadModelsComponent({{ make.id }})"> {{make.name}} </button>
在加载 Models.component 时，'unload'（或删除）Make.component。

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

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

相关：我计划使用一项服务（访问 Edmunds 的 API）来获取此数据，因此我需要将 make.id 传递给 models(.component)。_myApiService.getModels(make.id) [伪代码]

Answer 1

既然你提到了路由，我假设你的意思是当你点击一个按钮时，你想要路由到一个 as-usual 配置的路由，并将一些数据传递到那个新组件。

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

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

您以这种方式在接收组件端消费（假设您注入 ActivatedRoute）：

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

我到处都这样做，这很容易。避免在您的配置中使用“:token”格式和所有这些，您只需简单地配置路由：

{ path: 'myfabroute', component: MyFabComponent }

同样，还有其他方法可以做到这一点。这就是我最近倾向于的。

来自 <button> 的 Angular2 loading/unloading 组件

Angular2 loading/unloading Component from <button>

angular

data-binding

angular-routing

angular-components