#angular #typescript #nativescript #angular2-nativescript #angular-router
#angular #typescript #nativescript #angular2-nativescript #angular-маршрутизатор
Вопрос:
Шаблон, который я использовал: 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 { }
Что я делаю не так?
Комментарии:
1. попробуйте
this.routerExtensions.navigate(["./details"]);
2. Пробовал, не работает
3. Может быть, каким-то образом мне нужно указать выход при навигации?
4.
this.routerExtensions.navigate(["details/"]);
должно бытьthis.routerExtensions.navigate(["/details"]);
5. кроме того, не помещайте ничего за пределы
<page-router-outlet></page-router-outlet>
, это должен быть самый внешний тег
Ответ №1:
вы пробовали это this.routerExtensions.navigate(["/search/details"]);
включить родительский маршрут перед его дочерним путем
Ответ №2:
Шаблон вкладок NativeScript больше не рекомендуется. Воспользуйтесь этим руководством из блога NativeScript:
И его пример в GitHub:
https://github.com/NativeScript/login-tab-navigation-ng
В этом примере каждая вкладка имеет свое собственное дерево навигации, и вы можете переходить туда и обратно независимо (как это делает Facebook app). Внутри вкладок каждая навигация относительна, поэтому не используйте что-то вроде ['/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();
}