Javascript Angular2-在DOM中显示组件名称及其html模板路径

我曾想过在angular2应用程序中使用调试器组件，类似于magento电子商务功能中的“显示模板路径”

我想通过触发快捷键在DOM中显示左侧的模板路径和右侧的组件名称，这可以帮助开发人员调试大型应用程序

请告诉我，实现此调试组件的最佳方法是什么。这个组件应该显示各个DOM片段上的每个组件级别的信息，这些DOM片段是从该页面中使用的组件呈现的

---

提前感谢。

根据评论更新：

使用Reflect包

在所有组件中导入后，使用Reflect.getMetadata（'annotations'，ComponentClass）方法

从中可以提取模板URL

旧的

您可以使用ActivateRoute接口：

它包含当前路由的URL以及激活的组件

创建名为DebuggerService的服务，并在其中包含名为routeMap的属性，并在app.module中提供该属性。在每个组件上导入并注入此服务

现在，在每个组件的onInit或构造函数中，您可以执行以下操作：

@Component({...})
class MyComponent {
  constructor(private router: Router, debugger: DebuggerService) {
    this.debugger.routeMap += (this.router.url + '' + this.router.routeConfig.component.name)
  }
}

基本上，您所做的是连接服务中激活的每个路由。此值将存储在整个应用程序中，因为它在app.module中全局提供

现在，您可以在debuggerComponent中使用debuggerService的此属性并打印出所有路由

---

希望这是有意义的。

我正在使用模板url作为“templateUrl:”app/test/test info.component.html”。。。我无法从（this.route.url.map（segments=>segments.join（“”））+“”+this.route.component）中找到组件中给定的url。请建议更新我的答案更新我的答案：）这很好，但我无法获取模板url路径。我想显示完整的路径app/test/test-info.component.html。我们怎么知道的？我试过这个.router.url。但在控制台中，[object]componentName。。。。我只需要templateUrl来显示