Nativescript: перемещение между выходами маршрутизатора
для лучшего введения видеть сообщение в блоге о торговых точках.
Я использую TabView для навигации по моему мобильному приложению, написанному с помощью nativescript (ProtectedComponent).
<TabView
#tabView
tabsBackgroundColor="#f57c00" selectedTabTextColor="#B23010"
[(ngModel)]="selectedIndex"
(selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)">
<StackLayout *tabItem="{iconSource: 'res://tab-icons/cats'}">
<cats-tab></cats-tab>
</StackLayout>
<StackLayout *tabItem="{iconSource: 'res://tab-icons/dogs'}">
<dogs-tab></dogs-tab>
</StackLayout>
</TabView>
это часть кода компонента, относящегося к навигации:
navigateToCatsRoot() {
this.router.navigate([
'/protected',
{ outlets: { catOutlet: ['cats'] } }
]);
}
navigateToDogsRoot() {
this.router.navigate([
'/protected',
{ outlets: { dogOutlet: ['dogs'] } }
]);
}
tabViewIndexChange(index: number) {
switch(index) {
case 0:
this.navigateToCatsRoot();
break;
case 1:
this.navigateToDogsRoot();
break;
}
}
каждая вкладка содержит только конфигурацию розетки маршрутизатор, например:
<router-outlet name="catOutlet"></router-outlet>
маршрутизация настраивается следующим образом:
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{ path: 'protected', component: ProtectedComponent, children: [
{ path: 'cats', component: CatsComponent, outlet: 'catOutlet'},
{ path: 'cat/:id', component: CatDetailComponent, outlet: 'catOutlet'},
{ path: 'dogs', component: DogsComponent, outlet: 'dogOutlet'},
{ path: 'dog/:id', component: DogDetailComponent, outlet: 'dogOutlet'},
]},
вкладка навигация работает как шарм. Я могу перемещаться по вкладке навигации к различным розеткам, и я также могу перемещаться из одной розетки на страницу сведений об этой розетке:
this.router.navigate(
['/protected', { outlets: { catOutlet: ['cat', cat.id] } }]
);
проблема я бегу в это, как только я пытаюсь перейти с одного ракурса в одной розетки в другую ракурс другой выход. Поэтому, если я вызываю следующее из подробного представления cat:
this.router.navigate(
['/protected', { outlets: { dogOutlet: ['dog', dog.id] } }]
);
Я не получаю никаких ошибок, но ничего не происходит. Как только когда я переключаюсь на розетку, используя навигацию по вкладкам (которая все еще работает), я вижу подробный вид собаки в течение очень короткого времени, прежде чем он сбрасывается на обзор собак (что и должна делать навигация по вкладкам).
это означает, что dogOutlet
фактически обновляется с правильной навигацией и компонентом, но не переключается на вид / розетку. Компонент загружен, я проверил это при входе в OnInit подробного представления собаки. Он просто не переключается на эту розетку и показывает эту розетку.
как можно не только обновить эту розетку, но и переключиться на нее, поскольку она работает для компонентов обзора, как в представлении вкладки?
1 ответов
Я отправил вопрос в репозиторий github как проблема и получил ответ.
проблема заключалась в том, что навигация действительно изменилось, но selectedIndex
TabView не был изменен. При этом дополнительно к изменению навигации все работает!
let tabView:TabView = <TabView>this.page.getViewById("tabView");
tabView.selectedIndex = 2;