Açısal CLI'de bir bileşen nasıl yeniden adlandırılır?

178

Bir bileşeni Açısal CLI ile yeniden adlandırmak için klasör adı, .css, .ts, spec.ts ve app.module.ts gibi tüm bileşen dosyalarını el ile düzenlemek dışında herhangi bir kısayol var mı?

— Thomas Easo
kaynak

1

Html etiketinde değiştirmek istiyorsanız seçiciyi yeniden adlandırın. Sınıfı değiştirmek istiyorsanız, bunu manuel olarak yapmanız gerekir.

— Alaksandar Jesus Gene

Ekleyene kadar ng destroyşanslı değilsiniz ...

— William Hampshire

4

Bu konudaki

— Andrii Romanchak

arama ve değiştirme, birkaç dosya / dizinleri yeniden adlandırın .... iş bitti

— ldgorman

180

Hayır!

Bileşen oluşturma komutu kullanılarak oluşturulan tüm dosyaların adını değiştirecek bir komut yoktur. Yani yaratılmış ts, html, css/scss, .spec.ts dosyalar manuel / yeniden adlandırılmış düzenlenmesi gerekecektir.

Ben sık sık bir kullanıcıyım angular clive ben sadece açısal bileşenler oluşturmak ve onları yeniden adlandırmak gerekir gibi bu güzel bir komut olacağını düşünüyorum. Bu yeniden adlandırma komutu bulunmadığından, oluşturulan açısal bileşen, yönerge, vb. Silindiğinde ve bileşen oluşturma komutunun tekrar çalıştırılması gerçekten bir acıdır.

İşte bu özelliği eklemek için tartışma bağlantısı açısal bileşeni yeniden adlandırın

— Aniruddha Das
kaynak

6

Bu, eski projeleri yeniden kullanmak için de kullanışlıdır.

— Leo

1

WebStorm 2018.1.2kelimelerdeki yeni , bileşenin yeniden adlandırılmasına izin verir, ancak asla kullanılmaz. bir gün sonra deneyecek

— Aniruddha Das

2

Örneğin VSCode'da, yanlış bir şey olduğunda (var olmayan dosya, var olmayan bileşen vb.), Soldaki dosya gezgini bölmesinde hata göstergelerini görebilirsiniz. Yani, benim durumumda bir bileşeni yeniden adlandırmam gerekiyordu, sadece klasörünü ve iç dosya adlarını yeniden adlandırdım, sonra tüm hata göstergelerini izledim, bu bileşenin adını buna göre değiştirdim. Sanırım bu özellik bugünlerde diğer modern IDE'lerde de var ... Ama bunu otomatik olarak yapan bir açısal cli komutuna sahip olmak ("ng gc ..." gibi) harika olurdu! Mutlu kodlama! :)

— TheCuBeMan

1

Bu özellik hakkında 2016'dan bu yana bu özellik hakkında bir tartışma var: github.com/angular/angular-cli/issues/900 Böyle bir özellik için tüm talepler bu konuya bağlanır ve kapatılır. @AniruddhaDa cevaba eklemeyi düşünür müsünüz?

— Stefan

1

@Stefan şimdi eklendi. okey görünüyor, düzenlemek de çekinmeyin.

— Aniruddha Das

48

Şu anda Açısal CLI, kodu yeniden adlandırma veya yeniden düzenleme özelliğini desteklememektedir.

Bu tür işlevleri bazı IDE'lerin yardımıyla elde edebilirsiniz.

Intellij, Eclipse, VSCode vb. Varsayılan olarak yeniden düzenleme desteği vardır.

Bugünlerde VSCode biraz yükseliş trendi gösteriyor, şahsen ben bunun hayranıyım

VSCode ile Yeniden Düzenleme

Referans belirleme : - VS Kodu, değişkeni seçip SHIFT+ kısayoluna basarak bir değişkenin tüm referanslarını bulmanıza yardımcı olur F12. Bu, Type Script ile inanılmaz iyi çalışır.

Tüm referans örneklerini yeniden adlandırma : - Tüm referansları bulduktan sonra F2, basabileceğiniz bir açılır pencere açılır ve değeri değiştirebilir ve enter'a tıklayabilirsiniz, bu tüm referans örneklerini güncelleyecektir.

Dosyaları ve içe aktarmaları yeniden adlandırma Bir dosyayı ve içe aktarma referanslarını bir eklenti ile yeniden adlandırabilirsiniz. Daha fazla ayrıntıyı burada bulabilirsiniz

Değişkenleri ve dosyaları yeniden adlandırdıktan sonra yukarıdaki adımlarla açısal bileşen yeniden adlandırma elde edebilirsiniz.

— samuelj90
kaynak

3

Referanslar, dosyalar ve ithalatlar hakkında konuşuyorsunuz, ancak bileşenleri yeniden adlandırmaya ne dersiniz?

— Ortomala Lokni

1

@OrtomalaLokni angular-cli, yeniden adlandırmayı desteklemez. Yeniden adlandırma görevi bu üç adımla gerçekleştirilebilir.

— samuelj90

1

bkz açısal yeniden adlandırma

Yüklemek

npm install -g angular-rename

kullanım

$ ./angular-rename OldComponentName NewComponentName

— emrhzc
kaynak

1

Github deposu artık mevcut değil

— Emmanuel

en kötü bileşen evet ... hiçbir düzgün belge, hatalarla dolu ... güzel fikir ... ama yararsız

— DS_web_developer

1

OP bir CLI komutu isterken bazı cevaplar IDE'lere odaklanır. Bu cevapta, geçerli WebStorm / IntelliJ'nin bileşenin yeniden adlandırılmasına izin verdiğini onaylıyorum. Yapılması gereken tek şey .tsdosyadaki sınıfı yeniden adlandırmaya çalışmaktır . Size sunulacaklar:

ve yeniden adlandırma ilgili tüm yerlerde gerçekleştirilir.

— P Marecki
kaynak

Bu ilk olarak @Aniruddha Das

— P Marecki

0

İlk cevabın belirttiği gibi, şu anda bileşenleri yeniden adlandırmanın bir yolu yok, bu yüzden hepimiz sadece iş etrafından bahsediyoruz! Bu benim işim:

Beğendiğiniz yeni bileşeni oluşturun.

bileşen oluşturmak newName
Visual studio kod düzenleyicisini veya başka bir düzenleyiciyi kullanarak kodu / parçaları yan yana taşıyın!
Linux'ta, referansları bulmak / değiştirmek için grep & sed (bul ve değiştir) kullanın.

grep -ir "oldname"

klasörünüzü cd

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

— Salah-1
kaynak

0

Şahsen bunun için herhangi bir komut bulamadım. Sadece yeni bir bileşen (adını ad) yapmak ve önceki bileşenin kopyalayıp yapıştırın html, cssve ts. Gelen tsbesbelli sınıf adı değiştirilecek. Bu en güvenli yöntem ama biraz zaman alıyor.

— Priyanka Arora
kaynak

0

WebStorm'da, TypeScript dosyasındaki bileşenin adında → Refactor → Yeniden Adlandır'ı sağ tıklatarak adını her yerde değiştirir.

— Ollie
kaynak