如何重用组件代码（Angular2 + TS）答案

【问题标题】：How to reuse a component code (Angular2 + TS)如何重用组件代码（Angular2 + TS）
【发布时间】：2016-10-18 00:37:34
【问题描述】：

创建一个小型 Angular 2 应用程序（一款名为 AbyssRium 的好游戏的计算器），我试图重用一个显示元素列表的简单组件的代码。我希望这些组件只显示元素的子集（按组过滤）。

我不确定是否可以使用 RouteConfig（传递参数）来做到这一点，但这将是一个不错的选择。我试图理解“路线”文档（here 和 here），但我看不到任何明确的参考（现在正在使用Resolve，但还没有结果）。我正在寻找这样的东西：

@RouteConfig([
  {path: '/corals', name: 'Corals', component: ItemsList, data:{group:'coral'}, useAsDefault: true},
  {path: '/fishes', name: 'Fishes', component: ItemsList, data:{group:'fish'}},
])

我也尝试过继承模块（ItemsList -> ItemsCoralList & ItemsFishList），并在构造函数中初始化类（this.group = "coral"），但出现大量编译错误：

无法解析“xxx”。确保它们都有有效的类型或注释。

知道如何在不复制所有代码两次的情况下做到这一点吗？

这里是Plunker的代码

【问题讨论】：

标签： angular typescript angular2-routing reusability

【解决方案1】：

你可以使用：

{path: '/:group', component: ItemsList}

通过路由器访问

constructor(route: ActivatedRoute) {
  this.route.params.subscribe(params => params.group)
}

注意：这是路由器 3.x 的语法，它可能无法开箱即用 - 你应该升级到 final...

【讨论】：

如何在模板中使用这个路由？它没有名字，所以我不知道怎么称呼它。 Corals 引发错误。