Angular CLI에서 구성 요소의 이름을 바꾸는 방법은 무엇입니까?

폴더 이름, .css, .ts, spec.ts 및 app.module.ts와 같은 모든 구성 요소 파일을 수동으로 편집하는 것 외에 Angular CLI로 구성 요소의 이름을 바꾸는 바로 가기가 있습니까?

아니!

component create 명령을 사용하여 생성 된 모든 파일의 이름을 변경하는 명령이 없습니다. 그래서 만든 ts, html, css/scss, .spec.ts 파일을 수동으로 / 이름 편집 할 필요가있다.

나는 자주 사용자이며 angular cli각도 구성 요소를 만들고 이름을 바꿔야하기 때문에 이것이 좋은 명령이라고 생각합니다. 이 이름 바꾸기 명령이 없으므로 생성 된 각도 구성 요소, 지시문 등을 삭제하고 명령을 다시 실행하여 구성 요소를 작성하는 것은 실제로 어려움입니다.

이 기능을 추가하는 토론 링크는 각도 구성 요소 이름 바꾸기

현재 Angular CLI는 코드 이름 변경 또는 리팩토링 기능을 지원하지 않습니다.

일부 IDE의 도움으로 이러한 기능을 수행 할 수 있습니다.

Intellij, Eclipse, VSCode 등은 기본적으로 리팩토링을 지원합니다.

요즘 VSCode는 상승 추세를 보이고 있습니다. 개인적 으로이 팬입니다.

VSCode를 사용한 리팩토링

결정 참조 :-VS Code는 변수를 선택하고 단축키 SHIFT+를 눌러 변수의 모든 참조를 찾는 데 도움이 F12됩니다. 이것은 Type Script와 매우 잘 작동합니다.

모든 참조 인스턴스 이름 바꾸기 :-모든 참조를 찾은 후을 누르면 F2팝업이 열리고 값을 변경하고 Enter를 클릭하면 모든 참조 인스턴스가 업데이트됩니다.

파일 및 가져 오기 이름 바꾸기 플러그인을 사용하여 파일 및 가져 오기 참조의 이름을 바꿀 수 있습니다. 자세한 내용은 여기를 참조 하십시오

변수 및 파일 이름을 바꾼 후 위 단계를 수행하면 각도 구성 요소 이름을 바꿀 수 있습니다.

각도 이름 변경 참조

설치

npm install -g angular-rename

사용하다

$ ./angular-rename OldComponentName NewComponentName

OP가 CLI 명령을 요청하는 동안 일부 답변은 IDE에 중점을 둡니다. 이 답변에서는 현재 WebStorm / IntelliJ가 구성 요소 이름을 바꿀 수 있음을 확인했습니다. .ts파일 에서 클래스 이름을 바꾸려고하면 됩니다. 당신은 제시 될 것이다 :

이름 바꾸기는 모든 관련 장소에서 수행됩니다.

첫 번째 답변에서 알 수 있듯이 현재 구성 요소의 이름을 바꿀 수있는 방법이 없으므로 모두 해결 방법에 대해서만 이야기하고 있습니다! 이것이 제가하는 것입니다:

1. 원하는 새 구성 요소를 작성하십시오.

   ng 구성 요소 newName 생성

2. Visual Studio 코드 편집기 또는 다른 편집기를 사용하여 코드 / 조각을 나란히 편리하게 이동하십시오!

3. Linux에서는 grep & sed (찾기 및 바꾸기)를 사용하여 참조를 찾거나 교체하십시오.

   grep -ir "이전 이름"

   당신의 폴더를 cd

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

나는 개인적으로 같은 명령을 찾지 못했습니다. 그냥 새 구성 요소 (이름이 바뀐 이름)을 확인하고 이전 구성 요소의 붙여 넣기 복사 html, css하고 ts. 에서 ts분명히 클래스 이름은 대체 될 것입니다. 가장 안전한 방법이지만 시간이 조금 걸립니다.

WebStorm에서 TypeScript 파일의 구성 요소 이름을 마우스 오른쪽 버튼으로 클릭 → 리팩터링 → 이름 바꾸기를 클릭하면 어디서나 이름이 변경됩니다.