Как переименовать компонент в Angular CLI?

есть ли ярлык для переименования компонента с угловым CLI, кроме ручного редактирования всех файлов компонентов, таких как имя папки,.стиль CSS. ,ТС, спецификаций.ts и app.модуль.ТС?

71
angular angular-components

4 ответов

нет!

нет команды, которая изменит имя всех файлов, созданных с помощью команды component create. Так создано ts, html, css/scss, .spec.ts файлы необходимо переименовать/отредактировать вручную.

Я частый пользователь angular cli и я думаю, что это приятно иметь команду, так как некоторое время мы просто создаем угловые компоненты и должны переименовать его. Поскольку этой команды переименования нет, удалите созданный угловой компонент, директиву и т. д. И снова выполнение команды для создания компонента-это действительно боль.

74

В настоящее время Angular CLI не поддерживает функцию переименования или рефакторинга кода.

вы можете достичь такой функциональности с помощью некоторой IDE.

Intellij, затмение, VSCode etc.. имеет поддержку рефакторинга по умолчанию.

В настоящее время VSCode показывает некоторый восходящий тренд,лично я поклонник этого

рефакторинг с VSCode

Determinig reference : - VS Code поможет вам найти все ссылки на переменную путем выбора переменной и нажатия клавиши shortcut SHIFT + F12. Это работает невероятно хорошо с Type Script.

переименование всех экземпляров справочно :- После поиска всех ссылок вы можете нажать F2 откроется всплывающее окно, и вы можете изменить значение и нажать enter это обновит все экземпляры ссылки.

переименование файлов и импорта Файл и его ссылки на импорт можно переименовать с помощью плагин. Более подробную информацию можно найти здесь

enter image description here

с вышеуказанными шагами после переименования переменных и файлов вы можете добиться переименования углового компонента.

15

обновления: для переименования компонентов вы можете использовать:ng-rn

npm i ng-rn

использование

  cd /path/to/angular-project/
  ng-rn old-button fancy-button

инструмент ищет компоненты в src / app/. Если ваши компоненты расположены в более сложном пути, таком как src/app/my-vip-components, просто измените каталог:

  cd src/app/my-vip-components
  ng-rn old-button fancy-button

перед любыми изменениями сделайте резервные копии :)

2

Как указано в первом ответе, в настоящее время нет способа переименовать компоненты, поэтому мы все просто говорим о обходных путях! Вот что я делаю:--1-->

  1. создайте новый компонент, который вам понравился.

    ng генерировать компонент newName

  2. используйте редактор кода Visual studio или любой другой редактор, чтобы удобно перемещать код / части бок о бок!

  3. в Linux используйте grep & sed (find & replace) для поиск / замена ссылок.

    grep-ir "oldname"

    cd ваша папка

    sed-i 's / oldName / newName/g'*

0