Routage angulaire Nativescript d'un module enfant à un autre dans une configuration Tabs

Essaye ça :

Vous devez supprimer this.activatedRoute de navigate() , qui attribue la route actuelle avant le chemin de routage que vous avez fourni maintenant.

 this.router.navigate(['../tabs/feed', {
       outlets: {  primary: ['feed'], feedTab: ['feed'] }
    }
 ])

vous pouvez en savoir plus sur les outlets here de outlets here et suivre ce blog pour plus de détails .

J'espère que cela t'aides.. :)

Je ne pense pas que le routeur vous donne la possibilité de changer d'onglet. Vous devrez mettre à jour selectedIndex of BottomNavigation , puis accéder à l'onglet particulier que vous aimez.

Pour mettre à jour selectedIndex partir d'un composant enfant, utilisez un service avec un BehaviorSubject . Écoutez le sujet du composant parent, mettez à jour la valeur du composant enfant.

L'un des commentaires a demandé de clarifier comment utiliser un BehaviorSubject à cette fin, je publierai donc ce code au cas où il pourrait aider quelqu'un à l'avenir. Cela montrera comment utiliser un BehaviorSubject rxjs pour écouter les changements d'onglets et fournira également un moyen de modifier l'onglet actuel de BottomNavigation de n'importe où dans l'application à l'aide de ce service.

Le but de ce service est de fournir un emplacement central où l'élément d'interface utilisateur BottomNavigation est accessible dans toute l'application. Ça peut:

• Utilisez un ElementRef de BottomNavigation afin que le nativeElement soit accessible pour obtenir ou modifier l'onglet actuel de l'élément BottomNavigation .
• Fournit une observable BehaviorSubject rxjs qui permet aux consommateurs de ce service de s'abonner aux événements BottomNavigation selectedIndexChanged puis d'être avertis. Les newIndex et oldIndex sont émis à partir de cet observable rxjs BehaviorSubject sur chaque événement BottomNavigation selectedIndexChanged .

REMARQUE: Dans le composant qui a l'élément BottomNavigation dans son modèle (app.component.ts dans cet exemple), il doit donner à ce NavigationService la référence au BottomNavigation il a besoin dans son ngAfterViewInit cycle de vie ngAfterViewInit comme: this._navigationService.bottomNavigationRef = this.navRef; (voir l'extrait dans app.component.ts ci-dessous)

// another.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';

import { Subscription } from 'rxjs';

import { NavigationService } from './navigation.service';

@Component({
  selector: 'app-another-component',
  templateUrl: './another.component.html',
  styleUrls: ['./another.component.scss']
})
export class AnotherComponent implements OnDestroy, OnInit {
  private _subscription: Subscription;

  constructor(private _navigationService: NavigationService) {}

  ngOnInit(): void {
    // Example using BehaviorSubject Observable:
    this._subscription = this._navigationService.bottomNavigationTab$.subscribe(
      (selectedTab) => {
        console.log(`This component knows that the BottomNavigation current tab is now: ${selectedTab.newIndex} and the old tab was: ${selectedTab.oldIndex}`);

        if (selectedTab.newIndex === 2) {
          // do something ...
        }
      }
    );
  }

  ngOnDestroy(): void {
    // unsubscribe from BehaviorSubject Observable
    this._subscription.unsubscribe();
  }

  // Example changing the BottomNavigation tab from another component:
  changeTab(tab: number): void {
    this._navigationService.bottomNavigationRef.nativeElement.selectedIndex = tab;
  }

}

<!-- app.component.html (partial file just to show #bottomNav) -->
<BottomNavigation #bottomNav>
<!-- ... -->
</BottomNavigation>

// app.component.ts (partial file)

// ...
 @ViewChild('bottomNav') navRef: ElementRef<BottomNavigation>;
// ...
ngAfterViewInit(): void {
    // Gives the NavigationService the reference to the BottomNavigation it needs.
    this._navigationService.bottomNavigationRef = this.navRef;
}
// ...

// navigation.service.ts

import { ElementRef, Injectable, OnDestroy } from '@angular/core';

import { BottomNavigation, SelectedIndexChangedEventData } from '@nativescript/core';

import { BehaviorSubject, Subscription } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class NavigationService implements OnDestroy {
  private _bottomNavigationRef: ElementRef<BottomNavigation>;
  private _subscription: Subscription;
  private callbackSelIndexChgEv;
  /** rxjs BehaviorSubject observable to track the current tab of the BottomNavigation */
  bottomNavigationTab$: BehaviorSubject<{ newIndex: number; oldIndex: number }>;

  constructor() {
    // Must initialize rxjs BehaviorSubject observable with initial value.
    this.bottomNavigationTab$ = new BehaviorSubject({
      newIndex: -1,
      oldIndex: -1,
    });

    // Logs the current tab per this service.
    this._subscription = this.bottomNavigationTab$.subscribe((value) => {
      console.log(
        `NavigationService -> The BottomNavigation current tab index is now:
            newIndex: "${value.newIndex}"
            oldIndex: "${value.oldIndex}"`
      );
    });
  }

  ngOnDestroy(): void {
    this._subscription.unsubscribe();
    this._bottomNavigationRef.nativeElement.off(
      BottomNavigation.selectedIndexChangedEvent,
      this.callbackSelIndexChgEv
    );
  }

  get bottomNavigationRef(): ElementRef<BottomNavigation> {
    return this._bottomNavigationRef;
  }

  set bottomNavigationRef(bottomNavRef: ElementRef<BottomNavigation>) {
    this._bottomNavigationRef = bottomNavRef;

    this.callbackSelIndexChgEv = (
      $event: SelectedIndexChangedEventData
    ): void => {
      /* Update the current tab of the rxjs BehaviorSubject Observable */
      this.bottomNavigationTab$.next({
        newIndex: $event.newIndex,
        oldIndex: $event.oldIndex,
      });
    };

    this._bottomNavigationRef.nativeElement.on(
      BottomNavigation.selectedIndexChangedEvent,
      this.callbackSelIndexChgEv
    );
  }
}

Documentation de rxjs BehaviorSubject : https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject