VS Code - 如何从 Angular html 模板创建方法？答案

【问题标题】：VS Code - How to create a method from angular html template?VS Code - 如何从 Angular html 模板创建方法？
【发布时间】：2021-05-04 09:09:24
【问题描述】：

所以，当我想在 Angular 组件的 html 中声明一个新方法时，webstorm 为我提供了在 ts 中创建这个方法的机会：

但是，如果我在 VS 代码中尝试相同，我将无法创建方法。有什么解决办法吗？（扩展，也许在设置中）

【问题讨论】：

如果您指定在何处以及如何编写此函数，我可以修改My Code Actions 设置
@rioV8 我想说需要在与 html 相关的 ts 文件中创建此函数，它们通过 templateUrl 在指令处连接，例如 @Component({templateUrl: './someFile.html' } ）angular.io/guide/component-overview。感谢您的提示，如果一切顺利，我将查看代码操作的文档并发布答案。
所以 (click)="onToggle()" 是一个 html 文件，而要更改的 ts 文件具有对 html 文件的引用，而不是在不扫描的情况下在操作中指定要更改的 ts 文件将非常困难整个工作区，如果 ts 和 html 具有相同的文件名但扩展名不同，我可以添加文件变量，允许基于当前文件构造 ts 文件路径
@rioV8 所以，你是对的，通常角度组件对于 html、ts 等文件具有相同的名称
更改"atCursor" 属性，也许将click 更改为[a-zA-Z]+

标签： angular visual-studio-code webstorm shortcut

【解决方案1】：

您可以使用扩展名My Code Actions v0.6.0。

将此添加到您的settings.json

"my-code-actions.actions": {
    "[html]": {
      "Create function {{atCursor:$1}}": {
        "file": "${fileBasenameNoExtension}.ts",
        "atCursor": "\\(click\\)=\"([^\"]+)\\(\\)\"",
        "text": "function {{atCursor:$1}}() {\n}\n\n"
      }
    }
  }

如果需要，您可以添加更复杂（多个）的编辑

您可以查看扩展的文档页面以查看添加/修改导入语句的复杂编辑示例。

如果角度模板文件不是html，则调整语言ID

【讨论】：