Angular 12+의 사용자 정의 오류 클래스

Angular에서 사용자 지정 오류 클래스를 만드는 방법은 무엇입니까?

이미 존재하는 기본 오류 클래스를 사용하고 싶지 않은 경우가 있으므로 이러한 경우 고유한 오류 클래스를 작성해야 합니다. 그렇게 하려면 몇 가지 단계를 따라야 하며 모든 단계를 단계별로 조사할 것입니다.

이 에세이에서 나는 당신이 동일한 논리를 사용할 필요가 없도록 나만의 사용자 지정 오류 클래스를 만들었습니다. OOP 지식과 논리를 사용하여 수업을 수정할 수 있습니다. 어쨌든 코딩해봅시다!

이 경우 Angular가 사용되므로 아직 가지고 있지 않은 경우 이전에 가지고 있어야 합니다. 이를 얻으려면 이 사이트angular.io를 방문하십시오.

새로운 각도 프로젝트 만들기

먼저 터미널/powershell에서 새 각도 프로젝트를 만든 다음 편집기에서 프로젝트 폴더를 엽니다. 현재 편집자는 Visual Studio Code입니다.

응용 프로그램을 만드는 동안 라우팅을 허용해야 합니다.

ng new 'project name'

cd 'project folder'

ng serve

vscode를 사용하는 경우 navbar에서 새 터미널을 사용하여 프로젝트를 실행할 수 있습니다.

이제 프로젝트에 구현할 차례입니다. 앱 구성 요소의 변경 사항을 직접 구현하지 않고 대신 이를 수행하기 위해 다른 구성 요소를 만들 것입니다.

cd src/app
mkdir pages
cd pages
ng g c customError

구성 요소 페이지를 보려면 app-routing.module.ts에 경로 경로를 추가해야 합니다.

   const routes: Routes = [
     { path: 'customError', component: CustomErrorComponent }
   ];

응용 프로그램이 실행되면 페이지가 작동하는 것을 볼 수 있습니다! 여태까지는 그런대로 잘됐다!

사용자 정의 클래스를 생성하고 오류 구성 요소에서 사용하려면 각도 모델 유형을 사용하겠습니다. 앱 폴더 아래에 모델이라는 이름의 새 폴더를 만듭니다. 모델에서 새 터미널을 열고 다음을 살펴보십시오.

cd models
ng g class CustomError --type=model

모델 폴더에 CustomError 클래스가 생성되었습니다. 이 클래스에 대한 모든 변경 사항을 구현합니다.

이제 custom-error.model.ts와 같은 이름의 빈 파일이 있으므로 다음 코드와 같이 클래스를 정의할 차례입니다.

맞춤 error.model.ts

export class CustomError extends Error {
    constructor(
        msg: string,
        private statusCode?: number, // optional variable
    ) {
        super(msg);
        Object.setPrototypeOf(this, CustomError.prototype);
    }
    alertError(): string{
        return this.statusCode ? `Custom Error: Status => ${this.statusCode}, Message => ${this.message}` : `Custom Error: Message => ${this.message}`;
    }
}

위의 코드에서 우리는 원하는 클래스를 방금 정의했으며 이 클래스는 typescript에서 기본적으로 정의된 Error 클래스로 확장됩니다. 보시다시피 msg 아래에 statusCode와 같은 이름의 또 다른 선택적 변수가 있습니다. 사용할 클래스에 오류 코드를 제공합니다.

구성 요소로 이동하겠습니다! model은 다음과 같이 custom-error.component.ts의 맨 위에서 호출되며 방금 생성한 클래스를 호출하기 위해 callCustomErrorModel 함수를 작성했습니다.

import { CustomError } from 'src/app/models/custom-error.model';

  errorMessage: any;
  constructor() { 
    this.callCustomErrorModel();
  }

  callCustomErrorModel(){
    let newError = new CustomError('this is new error instance', 101);
    if(newError instanceof CustomError) {
      this.errorMessage = newError.alertError();
    }
  }

URL localhost:4200/customError로 이동하는 동안 페이지에 메시지가 표시됩니다.

확실히 모든 코드를 얻고 개선할 수 있으므로 코드here에 액세스하십시오.