我曾想过在 angular2 应用程序中使用调试器组件，类似于 magento 电子商务功能中的“显示模板路径”。
我想通过触发快捷键在DOM本身中显示左侧的模板路径和红色条右侧的组件名称。这可以帮助开发人员调试大型应用程序。
请告诉我，实现此调试组件的最佳方式可能是什么。该组件应显示从该页面中使用的组件呈现的相应 DOM 的每个组件级别信息。
提前致谢。
【问题讨论】：
标签： javascript html typescript angular2-template angular2-forms
基于 cmets 的更新：
使用反射包here
在所有组件中导入它后，使用 Reflect.getMetadata('annotations', ComponentClass) 方法。
您可以从中提取您的模板URL。
旧
可以使用activatedRoute接口：Here
它有当前路由的 URL 以及被激活的组件。
创建一个名为 DebuggerService 的服务，并在其中包含一个名为 routeMap 的属性，并在 app.module 中提供它。在每个组件上导入并注入此服务。
所以现在在每个组件的 onInit 或 Constructor 中，你可以这样做：
@Component({...})
class MyComponent {
constructor(private router: Router, debugger: DebuggerService) {
this.debugger.routeMap += (this.router.url + '' + this.router.routeConfig.component.name)
}
}
您基本上所做的是将服务内激活的每条路由连接起来。该值将存储在整个应用程序中，因为它在 app.module 中全局提供。
您现在可以在 debuggerComponent 中使用 debuggerService 的此属性并打印出所有路由。
希望这是有道理的。
【讨论】：