จะเปลี่ยนชื่อส่วนประกอบใน Angular CLI ได้อย่างไร

178

มีทางลัดใด ๆ ในการเปลี่ยนชื่อส่วนประกอบด้วย Angular CLI นอกเหนือจากการแก้ไขไฟล์คอมโพเนนต์ทั้งหมดด้วยตนเองเช่นชื่อโฟลเดอร์, .css, .ts, spec.ts และ app.module.ts หรือไม่

— โทมัสอีซี่
แหล่งที่มา

1

เพียงเปลี่ยนชื่อตัวเลือกหากคุณต้องการเปลี่ยนในแท็ก html หากคุณต้องการเปลี่ยนชั้นเรียนคุณต้องดำเนินการด้วยตนเอง

— Alaksandar Jesus Gene

จนกว่าพวกเขาจะเพิ่มในng destroyคุณไม่ได้อยู่ในโชค ...

— William

4

คุณสามารถตรวจสอบคุณสมบัติในหัวข้อนี้: github.com/angular/angular-cli/issues/900

— Andrii Romanchak

ค้นหาและแทนที่, เปลี่ยนชื่อไฟล์ / ไดเรกทอรี .... งานเสร็จสิ้น

— ldgorman

180

No!

ไม่มีคำสั่งที่จะเปลี่ยนชื่อของไฟล์ทั้งหมดที่สร้างขึ้นโดยใช้คำสั่งสร้างส่วนประกอบ ดังนั้นสร้างts, html, css/scss, .spec.ts ไฟล์จะต้องเปลี่ยนชื่อด้วยตนเอง / แก้ไข

ฉันเป็นผู้ใช้บ่อยangular cliและฉันคิดว่านี่จะเป็นคำสั่งที่ดีที่จะมีเวลาที่เราเพิ่งสร้างองค์ประกอบเชิงมุมและจำเป็นต้องเปลี่ยนพวกเขา เนื่องจากคำสั่งเปลี่ยนชื่อนี้ไม่อยู่ที่นั่นการลบองค์ประกอบเชิงมุมที่สร้างขึ้นคำสั่ง ฯลฯ และการเรียกใช้คำสั่งเพื่อสร้างองค์ประกอบอีกครั้งเป็นเรื่องที่เจ็บปวดจริงๆ

นี่คือลิงค์การสนทนาเพื่อเพิ่มคุณสมบัตินี้ให้เปลี่ยนชื่อองค์ประกอบเชิงมุม

— Aniruddha Das
แหล่งที่มา

6

สิ่งนี้จะเป็นประโยชน์ในการใช้โครงการเก่าอีกครั้ง

— Leo

1

ใหม่WebStorm 2018.1.2กับคำอนุญาตให้เปลี่ยนชื่อองค์ประกอบ แต่ไม่เคยใช้ จะให้ทดลองใช้ในภายหลังสักวันหนึ่ง

— Aniruddha Das

2

ใน VSCode ตัวอย่างเช่นเมื่อมีสิ่งผิดปกติ (ไฟล์ที่นำเข้าที่ไม่มีอยู่ส่วนประกอบที่ไม่มีอยู่และอื่น ๆ ) คุณสามารถเห็นตัวบ่งชี้ข้อผิดพลาดในบานหน้าต่างสำรวจไฟล์ทางด้านซ้าย ดังนั้นในกรณีของฉันฉันจำเป็นต้องเปลี่ยนชื่อส่วนประกอบฉันเพิ่งเปลี่ยนชื่อโฟลเดอร์และชื่อไฟล์ภายในจากนั้นฉันก็ทำตามข้อบ่งชี้ข้อผิดพลาดทั้งหมดแก้ไขชื่อขององค์ประกอบนี้ตาม ฉันคิดว่าฟีเจอร์นี้มีอยู่ใน IDEs ที่ทันสมัยอื่น ๆ ในทุกวันนี้ ... แต่ถ้ามีคำสั่ง angi-cli ที่ทำสิ่งนี้โดยอัตโนมัติ (เช่น "ng gc ... ") ก็เยี่ยมมาก การเข้ารหัสที่มีความสุข! :)

— TheCuBeMan

1

มีการสนทนาเกี่ยวกับคุณลักษณะนี้ตั้งแต่ปี 2559 เกี่ยวกับคุณลักษณะนี้: github.com/angular/angular-cli/issues/900 คำขอทั้งหมดสำหรับคุณลักษณะดังกล่าวเชื่อมโยงกับกระทู้นี้และปิด @Aniruddha คุณคิดจะเพิ่มคำตอบนี้หรือไม่?

— Stefan

1

@Stefan เพิ่มแล้ว ดูว่าดูโอเคไหมอย่าลังเลที่จะแก้ไขด้วย

— Aniruddha Das

48

ปัจจุบัน Angular CLI ไม่รองรับคุณสมบัติการเปลี่ยนชื่อหรือการเปลี่ยนรหัสใหม่

คุณสามารถใช้ฟังก์ชันดังกล่าวได้โดยใช้ IDE บางตัว

Intellij, Eclipse, VSCode ฯลฯ มีค่าเริ่มต้นรองรับการเปลี่ยนโครงสร้าง

ทุกวันนี้ VSCode กำลังแสดงให้เห็นถึงแนวโน้มขาขึ้นส่วนตัวฉันเป็นแฟนของเรื่องนี้

การสร้างใหม่ด้วย VSCode

อ้างอิง Determinig : - VS รหัสช่วยคุณหาอ้างอิงทั้งหมดของตัวแปรโดยการเลือกตัวแปรและกดปุ่มลัด+SHIFT F12มันทำงานได้ดีอย่างเหลือเชื่อกับ Type Script

การเปลี่ยนชื่ออินสแตนซ์ทั้งหมดของการอ้างอิง : - หลังจากค้นหาการอ้างอิงทั้งหมดที่คุณสามารถกดF2จะเปิดป๊อปอัพและคุณสามารถเปลี่ยนค่าและคลิกที่นี่จะอัปเดตอินสแตนซ์ทั้งหมดของการอ้างอิง

การเปลี่ยนชื่อไฟล์และการนำเข้า คุณสามารถเปลี่ยนชื่อไฟล์และการอ้างอิงการนำเข้าด้วยปลั๊กอิน รายละเอียดเพิ่มเติมสามารถดูได้ที่นี่

ด้วยขั้นตอนข้างต้นหลังจากเปลี่ยนชื่อตัวแปรและไฟล์คุณจะสามารถเปลี่ยนชื่อองค์ประกอบเชิงมุมได้

— samuelj90
แหล่งที่มา

3

คุณพูดถึงการอ้างอิงไฟล์และการนำเข้า แต่สิ่งที่เกี่ยวกับการเปลี่ยนชื่อองค์ประกอบ?

— Ortomala Lokni

1

@OrtomalaLokni angi-cli ไม่รองรับการเปลี่ยนชื่องานการเปลี่ยนชื่อสามารถทำได้ด้วยสามขั้นตอนเหล่านี้

— samuelj90

1

เห็นการเปลี่ยนชื่อเชิงมุม

ติดตั้ง

npm install -g angular-rename

ใช้

$ ./angular-rename OldComponentName NewComponentName

— emrhzc
แหล่งที่มา

1

ที่เก็บ Github ไม่มีอยู่อีกต่อไป

— Emmanuel

ส่วนประกอบที่เลวร้ายที่สุด ... ไม่มีเอกสารที่เหมาะสมเต็มไปด้วยข้อบกพร่อง ... เป็นความคิดที่ดี ... แต่ไร้ประโยชน์

— DS_web_developer

1

ในขณะที่ OP ขอคำสั่ง CLI คำตอบบางข้อจะมุ่งเน้นไปที่ IDE ในคำตอบนี้ฉันเพิ่งยืนยันว่า WebStorm ปัจจุบัน / IntelliJ อนุญาตการเปลี่ยนชื่อองค์ประกอบ สิ่งที่ต้องทำคือพยายามเปลี่ยนชื่อคลาสใน.tsไฟล์ คุณจะได้รับ:

และการเปลี่ยนชื่อจะดำเนินการในสถานที่ที่เกี่ยวข้องทั้งหมด

— P Marecki
แหล่งที่มา

นี้ถูกรายงานครั้งแรกในหัวข้อปัจจุบันโดย @Aniruddha Das

— P Marecki

0

ดังที่คำตอบแรกระบุไว้ในขณะนี้ยังไม่มีวิธีในการเปลี่ยนชื่อส่วนประกอบดังนั้นเราทุกคนแค่พูดถึงวิธีแก้ไขปัญหา! นี่คือสิ่งที่ฉันทำ:

สร้างองค์ประกอบใหม่ที่คุณชอบ

ng สร้างองค์ประกอบ newName
ใช้โปรแกรมแก้ไขโค้ด Visual Studio หรือโปรแกรมแก้ไขอื่น ๆ เพื่อย้ายโค้ด / ชิ้นไปพร้อม ๆ กัน!
ใน Linux ให้ใช้ grep & sed (ค้นหาและแทนที่) เพื่อค้นหา / แทนที่การอ้างอิง

grep -ir "oldname"

ซีดีโฟลเดอร์ของคุณ

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

— ละหมาด-1
แหล่งที่มา

0

โดยส่วนตัวฉันไม่พบคำสั่งใด ๆ สำหรับสิ่งเดียวกัน เพียงให้ส่วนประกอบใหม่ (ชื่อเปลี่ยนชื่อ) และคัดลอกวางองค์ประกอบก่อนหน้าhtml, และcss tsในtsเห็นได้ชัดว่าชื่อชั้นจะถูกแทนที่ มันเป็นวิธีที่ปลอดภัยที่สุด แต่ใช้เวลาเล็กน้อย

— Priyanka Arora
แหล่งที่มา

0

ใน WebStorm คุณสามารถคลิกขวา→ Refactor →เปลี่ยนชื่อชื่อขององค์ประกอบในไฟล์ TypeScript และมันจะเปลี่ยนชื่อทุกที่

— โอลีฟ
แหล่งที่มา