Как остановить ActivatedRoute.queryParams.subscribe для вызова при обратной навигации?

Question

Как остановить ActivatedRoute.queryParams.subscribe для вызова при обратной навигации?

Платформа (ы) проблема возникает на

• iOS iOS 11 ipad mini2
• iphone 6 plus,
• Родная игровая площадка

следующие номера версий :

• tns-core-moduels 4.2.0
• tns-ios 4.2.0
• угловой / compiler-cli 6.1.2
• угловой / маршрутизатор 6.1.2
• nativescripte-angular 6.1.0

шаги по его воспроизведению: Есть 3 страницы: дом, сущность, контакт.они являются страницей корневого уровня и используют page-router-outlet

1. На домашней странице перейдите на страницу сущностей с параметром id = 1, нажав кнопку

   this.routerExtensions.navigate(['/entity'],
           {
               queryParams: {
                   id: '1'
               }
           }
       );
   

2. На странице объекта перейдите на страницу контактов с параметром id = 2, затем нажмите другую кнопку

    this.routerExtensions.navigate(['/contact'],
           {
               queryParams: {
                   id: '2'
               }
           }
       );
   

3. На странице контактов нажмите кнопку возврата системы вверху.осталось вернуться к странице сущности

ожидаемый результат: На странице сущности router.queryParams.subscribe НЕ должен вызываться при обратной навигации и показывать страницу сущности без каких-либоrefresh.

export class EntityComponent implements OnInit {
...
ngOnInit(): void {

    //if it's from Home page, that's OK;  
    //but how to stop it to be called on navigating back? 
    this.router.queryParams.subscribe(params => {
    console.log("EntityComponent queryParams with id : " + params.id);

    //To refresh page on regular navigating using id = 1.  
    //On back navigation, the page shouldn't be refreshed.

        });
}

фактический результат: this.router.queryParams.subscribe вызывается с параметром id = 2 (идентификатор страницы контакта)

код: https://play.nativescript.org/?template=play-ng&id=SgrzAJ&v=9

---

Кстати, @tsonevn предлагает решение в github не работает, эта строка:

this.router.queryParams.unsubscribe ();

даже имеет проблемы с компиляцией на игровой площадке.this.router.queryParams не имеет метода «отписаться».

entity.component.ts

Я бы предложил отказаться от подписки на this.router.queryParams при переходе кеще одну страницу и снова подписаться на нее при входе в EntityComponent.Например:

onButtonTap(): void {
     this.router.queryParams.unsubscribe();
    console.log("Entity Button was pressed, go to contact Page with id = 2");
    this.routerExtensions.navigate(['/contact'],
        {
            queryParams: {
                id: '2'
            }
        }
    );
}

Answer 1

Решение от OP.

Благодаря @tsonevn он обновил свое решение в github , теперь оно работает.

Новая демонстрация кода: https://play.nativescript.org/?template=play-ng&id=SgrzAJ&v=13

По сути, эта строка работает над нажатием кнопки, чтобы покинуть страницу.

this.subs.unsubscribe();

Однако реальный случай может быть более сложным.Например: на странице сущности есть 3 дочерних компонента, у каждого есть кнопка для перехода на страницу контактов.нам нужно передать «this.subs» дочерним компонентам и сохранить 3 места для «unsubscribe ()».

Как это сделать в одном месте?

Router Guard ' CanDeactivate ' - это хороший способ ввести его.

Шаги:

1. создать банкуdeactivate-guard.ts, вызовите метод component.unsubscribeQueryParams на странице deactivate

   export class CanDeactivateGuard implements CanDeactivate<any> {
   canDeactivate(component: any, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
       if (component.unsubscribeQueryParams()) {
           return true;
       } else {
           return false;
       }
   }
   

   }

2. поместите его в entity-routing.module.ts

   const routes: Routes = [
   { path: "entity", component: EntityComponent, canDeactivate: [CanDeactivateGuard] }];
   

3. реализовать метод 'unsubscribeQueryParams в' entity.component.ts '

   unsubscribeQueryParams() {
   if (this.subscription) {
       //be called by CanDeactivateGuard.canDeactivate() on leaving this page.
       this.subscription.unsubscribe();    
   }       
   return true; }
   

4. регистрация' can-deactivate-guard'into' app.module. '

Другая причина использования' CanDeactivate 'заключается в использовании page-router-outlet, при переходе вперед метод текущей страницы' ngOnDestroy 'вызываться не будет., поэтому поместить this.subscription.unsubscribe () в 'ngOnDestroy' не работает.

Из документа Nativescript:

С помощью page-router-outlet при переходе вперед,текущая страница и просмотры сохраняются в собственном стеке навигации.Соответствующий компонент не уничтожен.Это кешируется.

Для получения дополнительной информации, пожалуйста, проверьте 'жизненный цикл компонента при использовании страницы-маршрутизатора-розетки и маршрутизатора-розетки'

Эта проблема решена.

Ссылки по теме:

• https://github.com/NativeScript/nativescript-angular/issues/617

• Ошибка: невозможно повторно подключить ActivatedRouteSnapshot, созданный из другого маршрута