Jak zmienić nazwę komponentu w Angular CLI?

178

Czy istnieje skrót do zmiany nazwy komponentu za pomocą Angular CLI, inny niż ręczna edycja wszystkich plików komponentów, takich jak nazwa folderu, .css, .ts, spec.ts i app.module.ts?

angular angular-cli rename angular-components Thomas Easo
źródło
1
Po prostu zmień nazwę selektora, jeśli chcesz zmienić tag HTML. Jeśli chcesz zmienić klasę, musisz to zrobić ręcznie.
Alaksandar Jesus Gene
Dopóki nie dodać ng destroy, że nie jesteś w szczęście ...
William Hampshire
4
Możesz monitorować funkcję w tym wątku: github.com/angular/angular-cli/issues/900
Andrii Romanchak
wyszukaj i zamień, zmień nazwę kilku plików / katalogów .... zadanie wykonane
ldgorman

Odpowiedzi:

180

Nie!

Nie ma polecenia, które zmieni nazwę wszystkich plików wygenerowanych za pomocą polecenia tworzenia komponentu. Tak stworzony ts, html, css/scss, .spec.ts pliki muszą być ręcznie przemianowany / edytowany.

Jestem częstym użytkownikiem angular clii myślę, że byłoby to przyjemne polecenie, ponieważ od jakiegoś czasu po prostu tworzymy komponenty kątowe i musimy zmienić ich nazwy. Ponieważ tego polecenia zmiany nazwy nie ma, usunięcie utworzonego komponentu kątowego, dyrektywy itp. I ponowne uruchomienie polecenia utworzenia komponentu jest naprawdę uciążliwe.

Oto link do dyskusji, aby dodać tę funkcję zmiany nazwy komponentu kątowego

Aniruddha Das
źródło
6
Przydałoby się to również w przypadku ponownego wykorzystania starych projektów.
Leo
1
nowe WebStorm 2018.1.2słowa pozwalają na zmianę nazwy komponentu, ale nigdy go nie używały. spróbuję później pewnego dnia
Aniruddha Das
2
Na przykład w VSCode, gdy coś jest nie tak (importowany plik, który nie istnieje, nieistniejący komponent itd.), Możesz zobaczyć wskazania błędów w panelu eksploratora plików po lewej stronie. Tak więc w moim przypadku musiałem zmienić nazwę komponentu, po prostu zmieniłem nazwę jego folderu i nazwy plików wewnętrznych, a następnie po prostu postępowałem zgodnie ze wskazówkami dotyczącymi błędów, odpowiednio modyfikując nazwę tego komponentu. Wydaje mi się, że ta funkcja istnieje również w innych współczesnych IDE w dzisiejszych czasach ... Ale mieć polecenie angular-cli, które robi to automatycznie (podobnie jak „ng gc ...”) byłoby świetne! Miłego kodowania! :)
TheCuBeMan
1
Od 2016 roku trwa dyskusja na temat tej funkcji na temat tej funkcji: github.com/angular/angular-cli/issues/900 Wszystkie prośby o taką funkcję są połączone z tym wątkiem i zamknięte. @AniruddhaDas czy mógłbyś dodać to do odpowiedzi?
Stefan
1
@Stefan dodano teraz. sprawdź, czy wygląda dobrze, możesz również edytować.
Aniruddha Das
48

Obecnie interfejs wiersza polecenia Angular nie obsługuje funkcji zmiany nazwy ani refaktoryzacji kodu.

Możesz osiągnąć taką funkcjonalność za pomocą jakiegoś IDE.

Intellij, Eclipse, VSCode itp. Domyślnie obsługuje refaktoryzację.

Obecnie VSCode wykazuje pewien trend wzrostowy, osobiście jestem tego fanem

Refaktoryzacja za pomocą VSCode

Określenie odniesienia : - VS Code pomaga znaleźć wszystkie odwołania do zmiennej, wybierając zmienną i naciskając skrót SHIFT+ F12. Działa to niesamowicie dobrze z Type Script.

Zmiana nazwy wszystkich wystąpień odwołania : - Po znalezieniu wszystkich odniesień, które możesz nacisnąć F2, otworzy się wyskakujące okienko, w którym możesz zmienić wartość i kliknąć wprowadź, spowoduje to zaktualizowanie wszystkich wystąpień odniesienia.

Zmiana nazwy plików i importu Za pomocą wtyczki można zmienić nazwę pliku i jego odniesienia do importu. Więcej szczegółów można znaleźć tutaj

wprowadź opis obrazu tutaj

Wykonując powyższe czynności, po zmianie nazw zmiennych i plików można uzyskać zmianę nazwy komponentu kątowego.

samuelj90
źródło
3
Mówisz o odniesieniach, plikach i importach, ale co ze zmianą nazw komponentów?
Ortomala Lokni
1
@OrtomalaLokni angular-cli nie obsługuje zmiany nazwy. Zadanie zmiany nazwy można wykonać za pomocą tych trzech kroków.
samuelj90
1

zobacz zmianę nazwy kątowej

zainstalować

npm install -g angular-rename

posługiwać się 

$ ./angular-rename OldComponentName NewComponentName
emrhzc
źródło
1
Repozytorium Github już nie istnieje
Emmanuel
najgorszy element evet ... brak właściwej dokumentacji, pełen błędów ... fajny pomysł ... ale bezużyteczny
DS_web_developer
1

Podczas gdy OP prosi o polecenie CLI, niektóre odpowiedzi koncentrują się na IDE. W tej odpowiedzi potwierdzam tylko, że obecny WebStorm / IntelliJ pozwala na zmianę nazwy komponentu. Wszystko, co należy zrobić, to próba zmiany nazwy klasy w .tspliku. Otrzymasz:

wprowadź opis obrazu tutaj

a zmiana nazwy zostanie przeprowadzona we wszystkich odpowiednich miejscach.

P Marecki
źródło
Po raz pierwszy zostało to zgłoszone w bieżącym wątku przez @Aniruddha Das
P Marecki.
0

Jak wskazała pierwsza odpowiedź, obecnie nie ma możliwości zmiany nazw komponentów, więc wszyscy mówimy tylko o obejściach! Tym się właśnie zajmuję:

  1. Utwórz nowy komponent, który Ci się podoba.

    ng generuje komponent newName

  2. Użyj edytora kodu Visual Studio lub dowolnego innego edytora, aby wygodnie przenosić kod / elementy obok siebie!

  3. W Linuksie użyj grep & sed (znajdź i zamień), aby znaleźć / zamienić odniesienia.

    grep -ir "stara nazwa"

    cd swojego folderu

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

salah-1
źródło
0

Osobiście nie znalazłem żadnego polecenia na to samo. Wystarczy złożyć nowy komponent (przemianowano nazwę) i skopiować wkleić wcześniejsze komponentu html, cssoraz ts. W tsoczywisty sposób nazwa klasy zostanie zastąpiony. To najbezpieczniejsza metoda, ale zajmuje trochę czasu.

Priyanka Arora
źródło
0

W WebStorm możesz kliknąć prawym przyciskiem myszy → Refaktoryzuj → Zmień nazwę na nazwie komponentu w pliku TypeScript, a nazwa zmieni się wszędzie.

Ollie
źródło