转到 Visual Studio Code 中 Angular html 文件中的定义

Posted 2023-02-22

【中文标题】转到 Visual Studio Code 中 Angular html 文件中的定义

【英文标题】：Go To Definition in angular html file in Visual Studio Code

【发布时间】：2018-04-23 16:54:18

【问题描述】：

是否可以在编辑 Angular 项目的 html 文件时使用 Go To Definition (F12)（可能带有扩展名）？

假设在 sample.html 中：

<input matInput class="app-input" placeholder="InputName" [(ngModel)]="myNodel.name">

...

<button mat-mini-fab class="plus"
  (click)="myMethod()"
  <mat-icon>arrow_forward</mat-icon>
</button>

我想导航到 sample.ts 中的“myMethod() ...”，或者导航到模型的字段，到“name: string;”行在 my-model.ts 中，因为该函数通常适用于 .ts 文件。

【参考方案1】：

你可以通过扩展来做到这一点

Angular Language Service extension for VS Code.

有什么特点

此扩展为 Angular 模板提供了丰富的编辑体验，包括内联和外部模板，包括：

完成列表

AOT 诊断消息

快速信息

转到定义

Angular Language Service - A handy extension for angular developers

【讨论】：

立即测试...而且效果很好...谢谢，这就是我想要的。

在定义/导航到特定部分后，如何返回我们点击的地方？实际上 ts 文件是在我们点击的同一个文件中打开的。我的意思是如何返回到同一个文件或重新打开？

@vbRocks 你的意思是简单的回去吗？ Alt +

@gerleim 通过 ctrl+单击命名空间导航页面，但 Alt+

我在组件名称处单击F12（例如<myDropDown>）无法进入定义？只需显示No definition found for <myDropDown>。没事吧？

【参考方案2】：

你可以使用这个扩展angular2-switcher

这是我最喜欢的，我为谁担心。

https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher

【参考方案3】：

您只需要一个扩展程序 Angular Essentials by John Papa

通过安装这个你的 vscode 将成为专业的编辑器

【讨论】：

Angular 语言服务（这个包的一部分）是特别支持这个功能的扩展，它很棒-devblogs.microsoft.com/visualstudio/…