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

【问题标题】：Angular Nativescript can't navigate in lazy moduleAngular Nativescript 无法在惰性模块中导航
【发布时间】：2019-03-19 12:42:17
【问题描述】：

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

当我尝试导航到同级组件（都在一个惰性模块中）时：

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

（也这样做了 - 不确定这是否可以）：

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

我得到了错误：

错误：无法匹配任何路由。 URL 段：“详细信息”

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

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

App.components.html 标签：

<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"
    }
]

搜索.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 { }

搜索.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 { }

我做错了什么？

【问题讨论】：

试试this.routerExtensions.navigate(["./details"]);
试过了，不行
也许我需要在导航时指定插座？
this.routerExtensions.navigate(["details/"]); 应该是this.routerExtensions.navigate(["/details"]);
另外，不要在<page-router-outlet></page-router-outlet>之外放任何东西，它应该是最外面的标签

标签： angular typescript nativescript angular2-nativescript angular-router

【解决方案1】：

不再推荐使用 NativeScript 选项卡模板。从 NativeScript 使用本教程博客：

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

及其在 GitHub 中的示例：

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

在此示例中，每个选项卡都有自己的导航树，您可以独立地前后移动（就像 Facebook 应用程序一样）。在标签内，每个导航都是相对的，所以不要使用 ['/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();
}

【讨论】：

【解决方案2】：

你试过这个this.routerExtensions.navigate(["/search/details"]); 在子路径之前包含父路由路径

【讨论】：