Angular Nativescript 无法在惰性模块中导航 [英] Angular Nativescript can't navigate in lazy module

问题描述

我使用的模板:Nativescript-Tabs-Template

当我尝试导航到同级组件(​​都在一个惰性模块中)时:

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

(也这样做了 - 不确定这是否可以):

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

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

我收到错误:

错误:无法匹配任何路由.网址段:详细信息"

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

*但是当我使用 nsRouterLink 导航时它可以工作:*

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

App.components.html 标签:

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:

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:

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:

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 { }

我做错了什么?

推荐答案

不再推荐使用 NativeScript 标签模板.使用 NativeScript 中的本教程博客:

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

以及它在 GitHub 中的示例:

And its example in GitHub:

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

在本例中，每个选项卡都有自己的导航树，您可以独立返回和前进(就像 Facebook 应用程序那样).在标签内，每个导航都是相对的，所以不要使用像 ['/foo'] 之类的东西.

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

这篇关于Angular Nativescript 无法在惰性模块中导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！