我认为路由器不具备切换标签的功能。您将必须更新evaluate()
中的selectedIndex
,然后导航到所需的特定标签。
要从子组件更新BottomNavigation
,请使用带有selectedIndex
的服务。从父级组件听主题,从子级组件更新值。
,
其中一条评论要求澄清如何为此目的使用BehaviorSubject
,因此,我将发布此代码,以防将来对某人有所帮助。这将显示如何使用rxjs BehaviorSubject
来监听制表符的更改,并提供一种使用此服务从应用程序内的任何地方更改BottomNavigation
的当前选项卡的方法。
此服务的目的是提供一个中心位置,可在整个应用程序中访问BottomNavigation UI元素。它可以:
- 使用
ElementRef
中的BottomNavigation
,以便可以访问nativeElement
来获取或更改BottomNavigation
元素的当前标签。
- 提供一个可观察的rxjs
BehaviorSubject
,允许该服务的使用者订阅BottomNavigation selectedIndexChanged
事件,然后收到通知。在每个BottomNavigation newIndex
事件中,都可以从此rxjs oldIndex
发出BehaviorSubject
和selectedIndexChanged
。
注意::在其模板中具有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