Angular9에서 개발을 할 때 문제에 부딪쳤기 때문에 메모.

현상

상속 클래스에서, 부모 클래스의 메소드를 오버라이드(override) 하면 무한 루프 하게 되었다.

테스트 코드

부모 클래스

대상의 메소드를 async로 정의

app.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class AppService {
    constructor() {}

    async test() {
        console.log('parent');
    }
}

아이 클래스

부모 메서드를 재정의하고 부모 메서드를 호출합니다.

app-ex.service.ts

import { Injectable } from '@angular/core';
import { AppService } from './app.service';

@Injectable()
export class AppExService extends AppService {
    constructor() {
        super();
    }

    async test() {
        console.log('child')
        super.test();
    }
}

컴퍼넌트로부터 아이 클래스의 메소드를 호출한다

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AppExService } from './app-ex.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'extends-test';

  constructor(private service: AppExService) {
  }

  ngOnInit() {
      // 子クラスのメソッド呼び出し
      this.service.test();
  }
}

방문해보기

Chrome의 경우

부모/자녀 모두 로그가 제대로 나오고 있습니다

Edge의 경우

아이 클래스의 test()가 엄청 불린다

부모의 로그가 나오지 않음

로그를 보는 한은, 자신을 재귀 호출하고 있는 것 같다. . .



super의 참조가 this로 바뀌고 있는 것일까. . .
누군가의 해결 방법을 가르쳐 주었으면 좋겠다 ('Д`)

우선, 오버라이드(override)한 메소드가 아니면 부모 클래스의 메소드 부를 것 같기 때문에, 그래서 회피하기로 합니다. . .