Angular Nativescript 无法在惰性模块中导航

Question

Template I used : Nativescript-Tabs-Template

When I try to navigate to sibling component (both are in one lazy module) with:

 showItem() {
    this.routerExtensions.navigate(["details/"]);
}

(also done this - not sure if this is ok ) :

this.routerExtensions.navigate(["details", { outlets: { searchTab: ['details'] } }]);

I get the error :

Error: Cannot match any routes. URL Segment: 'details'

*But when I navigate with nsRouterLink it works: *

<Label text="this works" [nsRouterLink]="['/details']></Label>

App.components.html Tab :

<TabView androidTabsPosition="bottom">
    <page-router-outlet
    *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
    name="searchTab">
    </page-router-outlet>
</TabView>

Router.module.ts :

const routes: Routes = [
{
    path: "",
    redirectTo: "/(homeTab:home/default//browseTab:browse/default//searchTab:search/default)",
    pathMatch: "full"
},
    {
        path: "search",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/search/search.module#SearchModule",
        outlet: "searchTab"
    }
]

Search.module.ts :

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";

import { SearchRoutingModule } from "./search-routing.module";
import { SearchComponent } from "./search.component";
import { NgShadowModule } from 'nativescript-ng-shadow';
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { LabelMaxLinesDirective } from "../directives/label-max-lines.directive";
import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({
    imports: [
        NativeScriptCommonModule,
        SearchRoutingModule,
        NgShadowModule,
        NativeScriptFormsModule,
    ],
    declarations: [
        SearchComponent,
        LabelMaxLinesDirective,
        ItemDetailComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class SearchModule { }

Search.router.module.ts :

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { SearchComponent } from "./search.component";
import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [
    { path: "default", component: SearchComponent },
    { path: "details", component: ItemDetailComponent }
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class SearchRoutingModule { }

What Am I doing wrong ?

Answer 1

NativeScript Tabs Template is no longer recommended. Use this tutorial from NativeScript Blog:

https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation

And its example in GitHub:

https://github.com/NativeScript/login-tab-navigation-ng

In this example each tab has its own navigation tree and you can go back and forward independently (Like Facebook app does). Inside tabs every navigation is relative, so don't use something like ['/foo'] .

constructor(
  private route: ActivatedRoute,
  private router: RouterExtensions
) { }

goForward() {
  const navigation: ExtendedNavigationExtras = {
    relativeTo: this.route,
    transition: {
    name: 'slide'
    }
  };

  this.router.navigate(['../foo'], navigation);
}

goBack() {
  this.router.back();
}

Answer 2

have you tried this this.routerExtensions.navigate(["/search/details"]); include the parent route path before its child path