VS Code - Как создать метод из шаблона angular html?

#angular #visual-studio-code #webstorm #shortcut

#угловатый #visual-studio-code #веб-шторм #короткий путь

Вопрос:

Итак, когда я хочу объявить новый метод в html компонента Angular, webstorm предоставляет мне возможность создать этот метод в ts:

Но, если я попробую то же самое в VS code, я не смогу создать метод. Есть ли какое-то решение? (расширения, может быть, что-то в настройках)

1. если вы укажете, где и как написать эту функцию, я могу изменить My Code Actions настройку

2. @rioV8 Я бы сказал, что нужно создать эту функцию внутри файла ts, связанного с html, они подключены к директиве через templateUrl, например @Component({templateUrl: ‘./someFile.html ‘ }) angular.io/guide/component-overview . Спасибо за подсказку, я посмотрю документацию по действиям кода и опубликую ответ, если все пойдет хорошо.

3. итак, (click)="onToggle()" это HTML-файл, а ts-файл для изменения имеет ссылку на html-файл, чем будет очень сложно указать ts-файл для изменения в действии без сканирования всей рабочей области, если ts и html имеют одинаковое имя файла, но разное расширение, я могу добавить переменные файлаэто позволяет построить путь к файлу ts на основе текущего файла

4. @rioV8 Итак, вы правы, в целом угловые компоненты имеют одинаковые имена для файлов html, ts и т. Д.

5. Измените "atCursor" свойство, возможно, измените click с помощью [a-zA-Z]

Ответ №1:

Вы можете использовать расширение My Code Actions версии 0.6.0.

Добавьте это в свой settings.json

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

При необходимости вы можете добавить более сложные (множественные) изменения

Вы можете взглянуть на страницу документа расширения, чтобы увидеть пример сложного редактирования для добавления / изменения инструкции import.

Настройте LanguageID, если файлы шаблонов angular не являются html