Làm cách nào để đổi tên một thành phần trong Angular CLI?

177

Có lối tắt nào để đổi tên một thành phần với Angular CLI ngoài việc chỉnh sửa thủ công tất cả các tệp thành phần như tên thư mục, .css, .ts, spec.ts và app.module.ts không?

— Thomas Easo
nguồn

1

Chỉ cần đổi tên bộ chọn, nếu bạn muốn thay đổi trong thẻ html. Nếu bạn muốn thay đổi lớp, bạn cần phải làm thủ công.

— Alaksandar Jesus Gene

Cho đến khi họ thêm vào ng destroybạn không gặp may mắn ...

— William Hampshire

4

Bạn có thể theo dõi tính năng trong chuỗi này: github.com/angular/angular-cli/issues/900

— Andrii Romanchak

tìm kiếm và thay thế, đổi tên một vài tập tin / thư mục .... công việc đã hoàn thành

— ldgorman

179

Không!

Không có lệnh nào sẽ thay đổi tên của tất cả các tệp được tạo bằng lệnh tạo thành phần. Vì vậy, tạo ra ts, html, css/scss, .spec.ts tập tin cần phải được đổi tên bằng tay / chỉnh sửa.

Tôi là người dùng thường xuyên angular clivà tôi nghĩ rằng đây sẽ là một lệnh dễ sử dụng vì đôi khi chúng ta chỉ cần tạo các thành phần góc cạnh và cần đổi tên chúng. Vì lệnh đổi tên này không có, việc xóa thành phần góc được tạo, chỉ thị, v.v. và một lần nữa chạy lệnh để tạo thành phần đó thực sự là một nỗi đau.

Dưới đây là liên kết thảo luận để thêm tính năng này đổi tên thành phần góc

— Aniruddha
nguồn

6

Điều này cũng sẽ thuận tiện để sử dụng lại các dự án cũ.

— Leo

1

mới WebStorm 2018.1.2về từ cho phép đổi tên thành phần nhưng không bao giờ sử dụng nó. sẽ thử lại sau một ngày nào đó

— Aniruddha Das

2

Ví dụ, trong VSCode, khi có lỗi xảy ra (tệp đã nhập không tồn tại, thành phần không tồn tại, v.v.), bạn có thể thấy các dấu hiệu lỗi trong ngăn trình duyệt tệp ở bên trái. Vì vậy, trong trường hợp của tôi, tôi cần đổi tên một thành phần, tôi chỉ đổi tên thư mục và tên tệp bên trong của nó, sau đó tôi chỉ cần làm theo tất cả các dấu hiệu lỗi, sửa đổi tên của thành phần này cho phù hợp. Tôi đoán tính năng này cũng tồn tại trong các IDE hiện đại khác hiện nay ... Nhưng để có một lệnh angular-cli tự động thực hiện điều này (giống như "ng gc ...") sẽ rất tuyệt! Chúc mừng mã hóa! :)

— TheCuBeMan

1

Có một cuộc thảo luận về tính năng này kể từ năm 2016 về tính năng này: github.com/angular/angular-cli/issues/900 Tất cả các yêu cầu cho một tính năng như vậy được liên kết với chủ đề này và đóng lại. @Aniruddha Bạn có phiền khi thêm câu này vào câu trả lời không?

— Stefan

1

@Stefan đã thêm ngay bây giờ. xem nếu trông okey, hãy chỉnh sửa là tốt.

— Aniruddha Das

48

Hiện tại Angular CLI không hỗ trợ tính năng đổi tên hoặc tái cấu trúc mã.

Bạn có thể đạt được chức năng như vậy với sự trợ giúp của một số IDE.

Intellij, Eclipse, VSCode, v.v. có mặc định hỗ trợ tái cấu trúc.

Ngày nay VSCode đang cho thấy một số xu hướng tăng, cá nhân tôi là một fan hâm mộ của điều này

Tái cấu trúc với VSCode

Tham chiếu xác định : - Mã VS giúp bạn tìm tất cả các tham chiếu của một biến bằng cách chọn biến và nhấn phím tắt SHIFT+ F12. Điều này hoạt động rất tốt với Type Script.

Đổi tên tất cả các trường hợp tham chiếu : - Sau khi tìm thấy tất cả các tham chiếu bạn có thể nhấn F2sẽ mở một cửa sổ bật lên và bạn có thể thay đổi giá trị và nhấp vào mục này sẽ cập nhật tất cả các trường hợp tham chiếu.

Đổi tên tệp và nhập Bạn có thể đổi tên tệp và tham chiếu nhập tệp bằng plugin. Thông tin chi tiết có thể được tìm thấy ở đây

Với các bước trên sau khi đổi tên các biến và tệp, bạn có thể đạt được việc đổi tên thành phần góc.

— samuelj90
nguồn

3

Bạn nói về tài liệu tham khảo, tập tin và nhập khẩu, nhưng về việc đổi tên các thành phần thì sao?

— Ortomala Lokni

1

@OrtomalaLokni angular-cli không hỗ trợ đổi tên. Nhiệm vụ đổi tên có thể đạt được với ba bước này.

— samuelj90

1

xem góc đổi tên

Tải về

npm install -g angular-rename

sử dụng

$ ./angular-rename OldComponentName NewComponentName

— emrhzc
nguồn

1

Kho lưu trữ Github không còn tồn tại nữa

— Emmanuel

evet thành phần tồi tệ nhất ... không có tài liệu phù hợp, đầy lỗi ... ý tưởng hay ... nhưng vô dụng

— DS_web_developer

1

Trong khi OP yêu cầu một lệnh CLI, một số câu trả lời tập trung vào các IDE. Trong câu trả lời này, tôi chỉ xác nhận rằng WebStorm / IntelliJ hiện tại không cho phép đổi tên thành phần. Tất cả những gì cần làm là cố gắng đổi tên lớp trong .tstệp. Bạn sẽ được trình bày với:

và việc đổi tên sẽ được thực hiện ở tất cả các nơi có liên quan.

— P Marecki
nguồn

Điều này đã được báo cáo đầu tiên trong chủ đề hiện tại của @Aniruddha Das

— P Marecki

0

Như câu trả lời đầu tiên đã chỉ ra, hiện tại không có cách nào để đổi tên các thành phần vì vậy tất cả chúng ta chỉ nói về công việc! Đây là những gì tôi làm:

Tạo thành phần mới mà bạn thích.

ng tạo thành phần newName
Sử dụng trình soạn thảo mã Visual studio hoặc bất kỳ trình soạn thảo nào khác để thuận tiện di chuyển mã / miếng cạnh nhau!
Trong Linux, sử dụng grep & sed (tìm & thay thế) để tìm / thay thế các tham chiếu.

grep -ir "tên cũ"

cd thư mục của bạn

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

— salah-1
nguồn

0

Cá nhân tôi đã không tìm thấy bất kỳ lệnh nào cho cùng. Chỉ cần tạo ra một thành phần mới (tên đổi tên) và sao chép dán của phần trước html, cssvà ts. Trong tsrõ ràng tên lớp sẽ được thay thế. Đây là phương pháp an toàn nhất nhưng mất một ít thời gian.

— Priyanka Arora
nguồn

0

Trong WebStorm, bạn có thể nhấp chuột phải → Refactor → Đổi tên thành phần trong tệp TypeScript và nó sẽ thay đổi tên ở mọi nơi.

— Ollie
nguồn