Bagaimana cara mengganti nama komponen di CLI Angular?

178

Apakah ada cara pintas untuk mengganti nama komponen dengan CLI Angular selain mengedit secara manual semua file komponen seperti nama folder, .css, .ts, spec.ts dan app.module.ts?

angular angular-cli rename angular-components Thomas Easo
sumber
1
Cukup ganti nama pemilih, jika Anda ingin mengubah tag html. Jika Anda ingin mengubah kelas, Anda harus melakukannya secara manual.
Alaksandar Jesus Gene
Sampai mereka menambahkan ng destroyAnda tidak beruntung ...
William Hampshire
4
Anda dapat memantau fitur di utas ini: github.com/angular/angular-cli/issues/900
Andrii Romanchak
cari dan ganti, ganti nama beberapa file / direktori .... pekerjaan selesai
ldgorman

Jawaban:

180

Tidak!

Tidak ada perintah yang akan mengubah nama semua file yang dihasilkan menggunakan perintah membuat komponen. Jadi dibuat ts, html, css/scss, .spec.ts file perlu secara manual berganti nama / diedit.

Saya adalah pengguna yang sering angular clidan saya pikir ini akan menjadi perintah yang bagus untuk dimiliki karena beberapa waktu kami hanya membuat komponen sudut dan perlu mengubah nama mereka. Karena perintah rename ini tidak ada, menghapus komponen sudut yang dibuat, direktif, dll dan lagi menjalankan perintah untuk membuat komponen benar-benar menyebalkan.

Berikut ini tautan diskusi untuk menambahkan fitur ini, ganti nama komponen sudut

Aniruddha Das
sumber
6
Ini juga berguna untuk menggunakan kembali proyek lama.
Leo
1
baru WebStorm 2018.1.2pada kata-kata memungkinkan penggantian nama komponen tetapi tidak pernah menggunakannya. akan mencobanya nanti
Aniruddha Das
2
Dalam VSCode misalnya, ketika ada sesuatu yang salah (file yang diimpor tidak ada, komponen yang tidak ada dan sebagainya), Anda dapat melihat indikasi kesalahan di panel file explorer di sebelah kiri. Jadi, dalam kasus saya, saya perlu mengganti nama komponen, saya hanya mengganti nama folder dan nama file dalamnya, lalu saya hanya mengikuti semua indikasi kesalahan, memodifikasi nama komponen ini sesuai. Saya kira fitur ini ada juga di IDE modern lain hari ini ... Tetapi untuk memiliki perintah angular-cli yang melakukan ini secara otomatis (seperti "ng gc ...") akan lebih bagus, meskipun! Selamat coding! :)
TheCuBeMan
1
Ada diskusi tentang fitur ini sejak 2016 tentang fitur ini: github.com/angular/angular-cli/issues/900 Semua permintaan untuk fitur tersebut ditautkan ke utas ini dan ditutup. @AniruddhaDas maukah kamu menambahkan ini ke jawabannya?
Stefan
1
@Stefan ditambahkan sekarang. lihat apakah terlihat okey, jangan ragu untuk mengedit juga.
Aniruddha Das
48

Saat ini Angular CLI tidak mendukung fitur pengubahan nama atau kode refactoring.

Anda dapat mencapai fungsionalitas tersebut dengan bantuan beberapa IDE.

Intellij, Eclipse, VSCode dll. Memiliki dukungan default refactoring.

Saat ini VSCode menunjukkan beberapa tren naik, secara pribadi saya penggemar ini

Refactoring dengan VSCode

Referensi penentu : - Kode VS membantu Anda menemukan semua referensi variabel dengan memilih variabel dan menekan pintasan SHIFT+ F12. Ini bekerja sangat baik dengan Type Script.

Mengganti nama semua instance referensi : - Setelah menemukan semua referensi yang dapat Anda tekan F2akan membuka popup dan Anda dapat mengubah nilainya dan klik enter ini akan memperbarui semua instance referensi.

Mengganti nama file dan mengimpor Anda dapat mengganti nama file dan referensi impornya dengan sebuah plugin. Rincian lebih lanjut dapat ditemukan di sini

masukkan deskripsi gambar di sini

Dengan langkah-langkah di atas setelah mengganti nama variabel dan file Anda dapat mencapai penggantian nama komponen sudut.

samuelj90
sumber
3
Anda berbicara tentang referensi, file, dan impor, tetapi bagaimana dengan mengganti nama komponen?
Ortomala Lokni
1
@OrtomalaLokni angular-cli tidak mendukung pengubahan nama. Tugas pengubahan nama dapat dilakukan dengan tiga langkah ini.
samuelj90
1

lihat angular-rename

Install

npm install -g angular-rename

menggunakan 

$ ./angular-rename OldComponentName NewComponentName
emrhzc
sumber
1
Repositori Github tidak ada lagi
Emmanuel
komponen terburuk yang pernah terjadi ... tidak ada dokumen yang tepat, penuh bug ... ide bagus ... tapi tidak berguna
DS_web_developer
1

Sementara OP meminta perintah CLI, beberapa jawaban fokus pada IDE. Dalam jawaban ini saya hanya mengkonfirmasi, bahwa WebStorm / IntelliJ saat ini tidak memungkinkan penggantian nama komponen. Semua yang perlu dilakukan adalah mencoba mengubah nama kelas dalam .tsfile. Anda akan disajikan dengan:

masukkan deskripsi gambar di sini

dan penggantian nama akan dilakukan di semua tempat yang relevan.

P Marecki
sumber
Ini pertama kali dilaporkan di utas saat ini oleh @Aniruddha Das
P Marecki
0

Seperti yang ditunjukkan oleh jawaban pertama, saat ini tidak ada cara untuk mengganti nama komponen jadi kita semua hanya berbicara tentang penyelesaian masalah! Inilah yang saya lakukan:

  1. Buat komponen baru yang Anda sukai.

    ng menghasilkan komponen newName

  2. Gunakan editor kode Visual studio atau editor lain apa pun untuk kemudian dengan mudah memindahkan kode / potongan berdampingan!

  3. Di Linux, gunakan grep & sed (temukan & ganti) untuk menemukan / mengganti referensi.

    grep -ir "oldname"

    cd folder Anda

    sed -i / oldName / newName / g '*

salah-1
sumber
0

Saya pribadi belum menemukan perintah untuk hal yang sama. Hanya membuat komponen baru (nama berganti nama) dan copy paste ini komponen sebelumnya html, cssdan ts. Di tsjelas nama kelas akan diganti. Ini metode yang paling aman tetapi membutuhkan sedikit waktu.

Priyanka Arora
sumber
0

Di WebStorm, Anda dapat mengklik kanan → Refactor → Ganti nama pada nama komponen dalam file TypeScript dan itu akan mengubah nama di mana-mana.

Ollie
sumber