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

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로 리팩터링

Determinig reference : - VS Code는 변수를 선택하고 바로 가기를 눌러 변수의 모든 참조를 찾을 수 있도록 도와줍니다.SHIFT+F12이것은 유형 스크립트에서 매우 잘 작동합니다.

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

파일 이름 변경 및 가져오기 플러그인을 사용하여 파일 및 가져오기 참조의 이름을 변경할 수 있습니다.자세한 내용은 여기에서 확인할 수 있습니다.

변수와 파일의 이름을 바꾼 후 위의 단계를 사용하면 각 구성 요소의 이름을 바꿀 수 있습니다.

네!

이제 있습니다.

VS Code에는 이러한 모든 단계를 수행할 수 있는 확장 기능이 있습니다.Rename Angular Component라고 합니다.

저는 나중에 웹스톰과 도식으로 포팅하기를 희망합니다.

이전에는 VS Code에서 최소 3단계의 반자동화 단계가 필요했습니다.이 확장은 모든 작업을 수행합니다.

나는 이것이 나만의 해결책을 홍보하고 있다는 것을 깨달았습니다.하지만 그것은 자유롭고, 오픈 소스이며, 완전한 답입니다.원하는 모든 것을 수행하지 못할 경우 보고서에 문제를 게시하면 개선됩니다.

구성 요소의 이름을 변경하는 데 사용하는 체크리스트는 다음과 같습니다.

1.구성 요소 클래스의 이름을 변경합니다(V 코드 이름 바꾸기 기호가 모든 참조를 업데이트합니다).

<Old Name>Component => <New Name>Component

2. 참조와 함께 @Component Selector 이름 바꾸기(VCode의 파일 바꾸기 사용):

app-<old-name> => app-<new-name>

Result:
@Component({
  selector: 'app-<old-name>' => 'app-<new-name>',
  ...
})

<app-{old-name}></app-{old-name}> => <app-{new-name}></app-{new-name}>

3.구성요소 폴더 이름 바꾸기(VSode에서 폴더 이름을 바꾸면 모듈 및 기타 구성요소의 참조가 업데이트됨)

src\app\<module>\<old-name> => src\app\<module>\<new-name>

4. 구성 요소 파일 이름 바꾸기(수동으로 이름 바꾸기가 가장 빠르지만 터미널을 사용하여 한 번에 이름을 바꿀 수도 있습니다)

<old-name>.component.* => <new-name>.component.*

Bash:
find . -name "<old-name>.component.*" -exec rename 's/\/<old-name>\.component/\/<new-name>.component/' '{}' +

PowerShell: 
Get-Item <old-name>.component.* | % { Rename-Item $_ <new-name>.component.$($_.Extension) }

Cmd:
rename <old-name>.component.* <new-name>.component.*

5. @Component의 파일 참조 바꾸기(VCode의 파일 바꾸기 사용):

<old-name>.component => <new-name>.component

Result:
@Component({
  ...
  templateUrl: './<old-name>.component.html' => './<old-name>.component.html',
  styleUrls: ['./<old-name>.component.scss'] => ['./<new-name>.component.scss']
})

그것으로 충분할 것입니다.

OP가 CLI 명령을 요청하는 동안 일부 답변은 IDE에 초점을 맞춥니다.이 답변에서는 현재 WebStorm/IntelliJ에서 구성요소의 이름을 변경할 수 있음을 확인합니다. 수업 이름을 만 하면 ..ts과 같은 메시지가 됩니다. 다음과 같은 정보가 제공됩니다.

이름 변경은 모든 관련 위치에서 수행됩니다.

저는 개인적으로 동일한 명령을 찾지 못했습니다.새 구성 요소(이름 변경)를 만들고 이전 구성 요소의 이름을 복사하여 붙여넣기만 하면 됩니다.html,css,그리고.tsts분명히 학급 이름이 바뀔 것입니다.가장 안전한 방법이지만 시간이 조금 걸립니다.

WebStorm에서 TypeScript 파일의 구성 요소 이름에서 → Refactor → Rename을 마우스 오른쪽 버튼으로 클릭하면 이름이 어디서나 변경됩니다.

으로 생각하는 다시 합니다.ng serve진정해요.

파일, 경로 및 참조의 이름을 변경합니다.실행 중인 서버를 닫고 모든 이름을 바꾼 후 다시 시작해야 하는 것이 중요합니다.

첫 번째 답변에서 알 수 있듯이, 현재 구성 요소의 이름을 바꿀 수 있는 방법이 없기 때문에 모두 해결 방법에 대해 이야기하고 있습니다!제가 하는 일은 다음과 같습니다.

1. 원하는 새 구성 요소를 만듭니다.

   ng generate 구성 요소 newName

2. Visual Studio 코드 편집기 또는 다른 편집기를 사용하여 코드/조각을 편리하게 나란히 이동할 수 있습니다!

3. Linux에서는 grep & sed(찾아서 바꾸기)를 사용하여 참조를 찾거나 바꿉니다.

   grep -ir "옛 이름"

   당신의 폴더를 cd합니다.

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

VS Code를 사용하는 경우 이름을 변경할 수 있습니다..ts, .html, .css/.scss, .spec.ts파일과 IDE가 가져오기 작업을 처리합니다.(예: " " " ")이 없습니다.app.module.ts그러나 사용 중인 모든 위치에서 구성 요소 이름을 변경해야 합니다.

rename cli 명령어가 아직 없습니다.그러나 이 문제를 해결하기 위해 찾은 가장 쉬운 방법은 CLI에서 새 구성 요소를 생성하고 내용을 새 구성 요소로 복사하는 것입니다.그런 다음 원래 구성 요소를 삭제하면 새 구성 요소 이름으로 이름을 변경해야 하는 코드베이스의 각 지점에 하나의 오류가 발생합니다.모든 오류가 처리되면 완료됩니다! :)

PS: 또한 이전 구성 요소에 대한 가져오기 문을 삭제해야 합니다.

Angular에서 구성 요소 이름을 변경하려면 다음 단계를 수행해야 합니다.

이름을 변경할 구성 요소가 들어 있는 파일을 엽니다.

를 .@Component구성요소 클래스 정의 위의 데코레이터입니다.

기속변다니에서 합니다.@Component구성요소에 지정할 새 이름의 장식자입니다.

예를 들어 구성 요소 이름을 이전 구성 요소에서 새 구성 요소로 변경하려면 다음을 수행합니다.

@Component({
  selector: 'my-new-component',
  ...
})

export class MyOldComponent {
  ...
}

파일을 저장합니다.바로 그거야!Angular에서 구성 요소 이름을 성공적으로 변경했습니다.

템플리트 또는 라우팅 구성과 같은 응용프로그램의 다른 부분에 있는 구성요소에 대한 참조를 업데이트해야 할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/46411036/how-to-rename-a-component-in-angular-cli