Angular Nativescript can't navigate in lazy module

笑着哭i 提交于 2019-12-25 01:47:00

问题


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 ?


回答1:


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



来源:https://stackoverflow.com/questions/55241335/angular-nativescript-cant-navigate-in-lazy-module

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!