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

178

Есть ли ярлык для переименования компонента с помощью Angular CLI, кроме ручного редактирования всех файлов компонентов, таких как имя папки, .css, .ts, spec.ts и app.module.ts?

— Томас Исо
источник

1

Просто переименуйте селектор, если вы хотите изменить в HTML-тег. Если вы хотите изменить класс, вам нужно сделать это вручную.

— Александр Иисус Джин

Пока они не добавят, ng destroyтебе не повезло ...

— Уильям Хэмпшир

4

Вы можете отслеживать эту функцию в этой теме: github.com/angular/angular-cli/issues/900

— Андрей Романчак,

поиск и замена, переименование пары файлов / каталогов .... работа сделана

— ldgorman

180

Нет!

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

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

Вот ссылка на обсуждение, чтобы добавить эту функцию переименовать угловой компонент

— Анируддха дас
источник

6

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

— Лев

1

новые WebStorm 2018.1.2слова позволяют переименовывать компонент, но никогда не использовали его. попробую позже когда-нибудь

— Анируддха Дас

2

Например, в VSCode, когда что-то не так (импортированный файл, который не существует, несуществующий компонент и т. Д.), Вы можете увидеть индикации ошибок в панели проводника файлов слева. Итак, в моем случае мне нужно было переименовать компонент, я просто переименовал его папку и имена внутренних файлов, затем я просто следовал всем указаниям об ошибках, соответственно изменяя имя этого компонента. Я полагаю, что эта функция существует и в других современных IDE в наши дни ... Но было бы здорово иметь команду angular-cli, которая делает это автоматически (во многом как "ng gc ...")! Удачного кодирования! :)

— TheCuBeMan

1

Об этой функции с 2016 года ведется обсуждение этой функции: github.com/angular/angular-cli/issues/900 Все запросы на такую функцию связаны с этой веткой и закрыты. @AniruddhaDas, не могли бы вы добавить это к ответу?

— Стефан

1

@Stefan добавил сейчас. Посмотрите, выглядит ли все в порядке, не стесняйтесь редактировать.

— Анируддха дас

48

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

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

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

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

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

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

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

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

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

— samuelj90
источник

3

Вы говорите о ссылках, файлах и импорте, а как насчет переименования компонентов?

— Ортомала Локни

1

@OrtomalaLokni angular-cli не поддерживает переименование. Задача переименования может быть достигнута с помощью этих трех шагов.

— samuelj90

1

см. angular-rename

устанавливать

npm install -g angular-rename

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

$ ./angular-rename OldComponentName NewComponentName

— emrhzc
источник

1

Github хранилище больше не существует

— Эммануэль

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

— DS_web_developer

1

В то время как OP запрашивает команду CLI, некоторые ответы сосредоточены на IDE. В этом ответе я только подтверждаю, что текущий WebStorm / IntelliJ разрешает переименование компонента. Все, что нужно сделать, это попытаться переименовать класс в .tsфайле. Вам будут представлены:

и переименование будет выполнено во всех соответствующих местах.

— П Марецки
источник

Об этом впервые сообщил в текущей теме @Aniruddha Das

— P Marecki

0

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

Создайте новый понравившийся компонент.

ng создать компонент newName
Используйте редактор кода Visual Studio или любой другой редактор, чтобы затем удобно перемещать код / фрагменты рядом!
В Linux используйте grep & sed (find & replace) для поиска / замены ссылок.

grep -ir "oldname"

cd твоя папка

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

— Салах-1
источник

0

Я лично не нашел ни одной команды для того же. Просто сделайте новый компонент (переименовано именем) и скопировать вставить предыдущую компоненту html, cssи ts. В tsочевидно имя класса будет заменено. Это самый безопасный метод, но занимает немного времени.

— Приянка Арора
источник

0

В WebStorm вы можете щелкнуть правой кнопкой мыши → Refactor → Rename по имени компонента в файле TypeScript, и он повсеместно изменит имя.

— Олли
источник