Angular에서 서비스가 파괴되었을 때

Unsplash에 있는 Asa Rodger의 표지 사진

OnDestroy 수명 주기 후크 API 설명Angular OnDestroy을 읽으면 서비스에서 사용할 수 있습니다.
그러나 이 정보 외에는 찾을 수 없습니다. 수명 주기 후크 페이지를 보면. 거기에는 아무 것도 설명되어 있지 않으므로 몇 가지를 시도해 볼 시간입니다.

우리는 서비스를 어떻게 사용합니까?

먼저 서비스 이용에 대해 파헤쳐 보겠습니다. 애플리케이션에 다양한 방식으로 서비스를 제공할 수 있습니다.

루트 수준에서

이 서비스는 모든 사람이 사용할 수 있으며 모든 모듈이 이 루트 서비스를 사용할 수 있습니다. 싱글톤으로 제공되기 때문에 하나만 살고 이 서비스에 대한 모든 작업, 모든 관찰 가능 항목은 전체 애플리케이션을 통해 공유됩니다.

두 가지 방법으로 정의할 수 있습니다. 제공된 In을 사용하면 모듈에 제공하지 않습니다.

@Injectable({ providedIn: 'root'})
export class RootService { ... }

제공된 정보에 대한 측주:

You can also use provideIn: module, but this is still in experimental phase, so be carefull, providedIn: 'root' is good integrated

또는 루트 모듈에 주입

@Injectable()
export class RootService { ... }

@NgModule({
    providers: [ RootService ],
})
export class AppModule{}

모듈 수준에서

모듈 수준에서 서비스를 생성할 수도 있습니다. 이러한 서비스는 비공개이며 해당 특정 모듈 전용입니다. 해당 모듈 내부에서 논리가 공유됩니다.

@Injectable()
export class ModuleService { ... }

@NgModule({
    providers: [ ModuleService ],
})
export class MyCustomModule{}

구성 요소 수준

이러한 서비스는 구성 요소 수준에서 주입되므로 구성 요소가 활성화된 후에만 활성화됩니다.

// providedIn
@Injectable()
export class Componentervice { ... }

@Component({
    selector: 'my-component',
  template: '...',
    providers: [ Componentervice ],
})
export class MyComponent{}

서비스의 수명 주기입니다.

먼저 서비스가 생성될 때 관심이 있습니다. 간단한 테스트를 추가할 수 있습니다. 아래와 같은 코드를 작성하십시오.

export class MyService {
    constructor(){
        console.log('constructor initialized')
  }
}

이 논리를 테스트하기 위해 몇 가지 테스트 케이스가 있습니다.

루트 수준

모듈 수준

지연 로드 모듈

구성 요소 수준

서비스 초기화

All service are initialised on the first usage.

서비스에 대한 참고 사항. 그것을 제공하는 것만으로는 충분하지 않습니다. 우리는 실제로 초기화될 해당 서비스에 대한 작업을 수행해야 하므로 공급자 배열에 추가하는 것은 해당 서비스를 초기화하는 방법이 아닙니다. 구성 요소 또는 공장을 통해 사용하는 것과 같이 다양한 방식으로 서비스를 처음 사용할 수 있습니다. …

따라서 서비스가 처음 사용할 때 모두 초기화된다는 사실을 알면 이것이 우리가 확신하는 한 가지입니다.
즉, 지연 로드 서비스는 경로가 처음 로드될 때만 초기화되고, providedIn: 'root' 서비스는 처음 사용될 때만 초기화됩니다. … .

출력을 살펴보겠습니다. 여기서 흥미로운 패턴을 볼 수 있습니다. 예상대로 루트, 모듈 및 게으른 서비스 공급자는 한 번만 생성됩니다. 구성 요소를 다시 생성하면 서비스가 다시 생성되지 않습니다.




하지만 가장 흥미로운 부분은 컴포넌트 제공 서비스입니다. 컴포넌트가 생성될 때마다 서비스도 생성됩니다.

Only component providers are created each time a component is created

서비스 파괴

이제 우리는 같은 일을 하지만 ngOnDestroy 후크로 서비스를 파괴합니다.
어떤 이유로 Google에서 로그 보존 확인란을 두껍게 두어 페이지를 떠날 때에도 로깅 기록을 추적할 수 있습니다.

다시 테스트 코드는 각 서비스에 대해 유사합니다.

@Injectable()
export class MyService implements OnDestroy {
  name = 'xxx service';

  constructor(private counterService: CounterService) { 
    console.log('Construct the xxx service')
  }  

  ngOnDestroy() {   
    console.log('Destroy the xxx service')
  }
}

먼저 구성 요소 서비스를 살펴봅니다. 구성 요소 서비스는 생성될 때마다 있으므로 구성 요소가 소멸될 때 소멸될 것으로 예상합니다.


3개의 다른 서비스를 보면 이들이 절대 파괴되지 않는다는 것을 알 수 있습니다. 페이지를 떠날 때도 마찬가지입니다. 페이지를 떠날 때 실수로 얻을 수 있지만 이에 대해 보장할 수는 없습니다.


따라서 이 ngOnDestroy 후크에 대한 결론은 다음과 같습니다.

결론

구성 요소 수준에서 서비스를 제공한다면 서비스가 폐기되는지 확신할 수 없습니다

.

구성 요소 수준에서 서비스를 제공하고 코드를 리팩토링하는 경우 이에 주의해야 합니다

.

Be careful when you use this hook on services

stackblitz에서 전체 평가판을 사용할 수 있습니다.