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

Question

在编辑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文件一起使用.

Answer 1

您可以使用扩展程序执行此操作

Angular Language Service extension for VS Code.

它有这个功能

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

完成清单

AOT诊断消息

快速信息

转到定义

Angular Language Service - A handy extension for angular developers

Answer 2

您可以使用此扩展angular2-switcher

这是我最喜欢的，我为谁分享关心。

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

Answer 3

你只需要一个扩展 Angular Essentials by John Papa

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