Уничтожить Angular Service при смене маршрута

Question

У меня есть сложный модуль с именем MyPageModule, импортирующий несколько модулей, который предоставляет Сервису следующую аннотацию @Injectable( { providedIn: 'root' } ).

Этот модуль импортируется путем отложенной загрузки, например:

// AppRoutingModule
...
 {
    path: 'my-page',
    loadChildren: './lazy-loader-modules/lazy-loader-mypage/lazy-loader-mypage.module#LazyLoaderMyPageModule'
 }

...

// LazyLoaderMyPageModule
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MyPageModule
  ]
})
export class LazyLoaderMyPageModule { }

Поведение, которое я хочу (на самом деле это не так): Когда url отличается от / my-page / *, я бы хотел, чтобы все службы, импортированные MyPageModule, были уничтожены.

Как я могу это сделать ?

Answer 1

Создайте корневой компонент на своем ленивом загруженном модуле с выходом маршрутизатора и добавьте провайдеров в метаданные компонента

@Component({
  selector: 'app-my-page-root',
  template: '<router-outlet></router-outlet>',
  styleUrls: ['./my-page-root.component.scss'],
  providers:[MyPageService, MyPageOtherService]
}) 
class MyPageRootComponent {}

Измените маршруты ленивого загруженного модуля на:

const routes= [
 { 
    path: '',
    component: MyPageRootComponent
    children: [
      // all of your routes
    ]
 }
]

Когда MyPageRootComponent уничтожен, все ваши службы будут уничтожены.

Редактировать:

StackBlitz: https://stackblitz.com/edit/lazy-load-destory-services

Answer 2

Просто предоставьте свои услуги в модуль.

Удалите

{ providedIn: 'root' }

И используйте это

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MyPageModule
  ],
  providers: [MyServiceOne, MyServiceTwo]
})

Каждый раз, когда модуль уничтожается, сервисы следуют.

Answer 3

Использование

  providedIn: UserModule,

Подробнее