[英]Angular Nativescript can't navigate in lazy module
我使用的模板: 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"
}
]
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 { }
我究竟做错了什么 ?
不再推荐 NativeScript 标签模板。 使用 NativeScript 博客中的本教程:
以及它在 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();
}
你试过这个this.routerExtensions.navigate(["/search/details"]);
在其子路径之前包含父路由路径
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.