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;