Angular에서 구성요소 삭제
Angular에서 컴포넌트를 삭제하는 방법을 소개합니다.
Angular에서 구성요소 삭제
여러 구성 요소가 포함된 웹 응용 프로그램을 구축할 때 어떤 이유로 구성 요소를 삭제해야 하는 상황이 발생할 수 있습니다.
Angular CLI를 사용하여 Angular에서 구성 요소를 만드는 것은 매우 쉽지만 Angular CLI를 사용하여 구성 요소를 삭제할 수 있는 옵션이 없으므로 수동으로 삭제해야 합니다.
구성 요소의 모든 인스턴스가 올바르게 제거되지 않으면 웹 응용 프로그램이 중단될 수 있으므로 구성 요소를 삭제하는 것은 쉽지 않습니다.
이 자습서는 Angular CLI를 사용하여 구성 요소를 만든 다음 모든 단계를 더 쉽게 이해하고 따를 수 있도록 단계별로 삭제하는 예를 살펴봅니다.
다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.
# angular
ng new my-app
Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.
# angular
cd my-app
이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.
# angular
ng serve --open
다음 명령을 사용하여 새 구성 요소를 만듭니다.
# angular
ng g c newcomponent
newcomponent.component.ts, newcomponent.component.html, newcomponent.component.css 3개의 파일이 포함된 App 폴더 안에 newcomponent라는 새 폴더가 생성된 것을 볼 수 있습니다. 이제 이 구성 요소를 삭제하는 방법에 대해 논의해 보겠습니다.
웹 애플리케이션에서 오류 없이 구성 요소를 쉽게 삭제하려면 다음 단계를 따르십시오.
-
내부의 모든 파일을 포함하여
newcomponent구성 요소의 폴더를 삭제합니다. -
구성 요소에 별도의 폴더가 없으면 구성 요소와 이름이 같은 파일을 삭제해야 할 수 있습니다. 내 예에서는
newcomponent.component.ts,newcomponent.component.html및newcomponent.component.css파일 3개를 삭제합니다. -
app.module.ts를 열고 아래와 같이 구성 요소를 가져온 위치를 삭제합니다.# angular import { NewComponent } from './newcomponent.component'; -
이제 아래와 같이
@NgModule내부의 구성 요소 선언을 삭제합니다.# angular @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HelloComponent, NewComponent ], bootstrap: [ AppComponent ] })
이 단계를 수행한 후 다음 명령을 사용하여 웹 애플리케이션을 시작할 수 있습니다.
# angular
ng build
ng serve
오류 없이 웹 애플리케이션을 로드합니다. 이 간단하고 쉬운 단계에 따라 구성 요소를 수동으로 올바르게 삭제할 수 있습니다.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn