Tabs设置中从一个子模块到另一个模块的本机脚本角路由

我在我的Nativescript Angular项目中为标签使用了<page-router-outlet></page-router-outlet><BottomNavigation></BottomNavigation>设置,但是从一个子选项卡路线导航到另一个子选项卡路线时遇到麻烦。

这是app-routing.module.ts

const routes: Routes = [
    { path: '',redirectTo: '/auth',pathMatch: 'full' },{ path: 'auth',component: AuthComponent },{ path: 'individual-tasks',component: SpecificTasksComponent },{
        path: 'tabs',component: TabsComponent,children: [
            {
                path: 'feed',loadChildren: '~/app/pages/feed/feed.module#Feedmodule',component: NSEmptyOutletComponent,outlet: 'feedTab'
            },{
                path: 'notification',loadChildren: '~/app/pages/notification/notification.module#Notificationmodule',outlet: 'notificationTab'
            },{
                path: 'create',loadChildren: '~/app/pages/create/create.module#CreateModule',outlet: 'createtab'
            },{
                path: 'profile',loadChildren: '~/app/pages/profile/profile.module#ProfileModule',outlet: 'profiletab'
            }
        ]
    }
];

而且我目前正在尝试从“创建”选项卡模块中导航到供稿选项卡模块。这是create-routing.module.ts

const routes: Routes = [
    { path: '',redirectTo: 'create',{ path: 'create',component: CreateComponent },{ path: 'create-tasks',component: CreatetasksComponent },{ path: 'create-preview',component: CreatePreviewComponent }
];

因此,如果我目前处于create-preview路线之内,如何导航回到app-routing.module.ts中的“标签/提要”出口?

我一直在尝试:

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

但是,尽管我明确地写了导航应该在feedTab上,但是它仍然导航到起始出口(配置文件)而不是feed出口。好像出口完全被忽略了...任何想法?

lanniulan 回答:Tabs设置中从一个子模块到另一个模块的本机脚本角路由

我认为路由器不具备切换标签的功能。您将必须更新evaluate()中的selectedIndex,然后导航到所需的特定标签。

要从子组件更新BottomNavigation,请使用带有selectedIndex的服务。从父级组件听主题,从子级组件更新值。

,

其中一条评论要求澄清如何为此目的使用BehaviorSubject,因此,我将发布此代码,以防将来对某人有所帮助。这将显示如何使用rxjs BehaviorSubject来监听制表符的更改,并提供一种使用此服务从应用程序内的任何地方更改BottomNavigation的当前选项卡的方法。

此服务的目的是提供一个中心位置,可在整个应用程序中访问BottomNavigation UI元素。它可以:

  • 使用ElementRef中的BottomNavigation,以便可以访问nativeElement来获取或更改BottomNavigation元素的当前标签。
  • 提供一个可观察的rxjs BehaviorSubject,允许该服务的使用者订阅BottomNavigation selectedIndexChanged事件,然后收到通知。在每个BottomNavigation newIndex事件中,都可以从此rxjs oldIndex发出BehaviorSubjectselectedIndexChanged

注意::在其模板中具有BottomNavigation元素的组件(在本示例中为app.component.ts)中,它必须为此{ {1}}在其NavigationService生命周期挂钩中对BottomNavigation的引用,例如:ngAfterViewInit (请参阅下面app.component.ts中的代码段)

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
    );
  }
}

// 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;
}
// ...
<!-- app.component.html (partial file just to show #bottomNav) -->
<BottomNavigation #bottomNav>
<!-- ... -->
</BottomNavigation>

rxjs // 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; } } 文档:https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject

,

尝试一下:

您需要从 this.activatedRoute 中删除navigate(),后者是在当前提供的路由路径之前分配当前路由。

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

您可以阅读有关outlets here的更多信息,并关注此博客以获取更多details

希望这会有所帮助..:)

本文链接:https://www.f2er.com/3009860.html

大家都在问