VS Code - 如何从 angular html 模板创建方法？

Question

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

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

Answer 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"
      }
    }
  }

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

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

如果 Angular 模板文件不是 html，请调整languageID 。

Answer 2

现在可以使用VSCode Angular 语言服务插件v14.2.0

• 壮举：支持修复组件缺失成员（ angular/angular#46764 ）
• 壮举：支持代码操作（#1723 ）

Answer 3

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

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