Nativescript Angular TabView +в ленивом загруженном модуле - PullRequest
Новая
       10

Nativescript Angular TabView +в ленивом загруженном модуле

0 голосов
/ 02 мая 2019

Я использую Nativescript-Angular (~ 7.1.0) для создания мобильного приложения, в котором App.component использует шаблон навигации RadSideDrawer, а лениво загруженный модуль использует шаблон навигации TabView.(ссылка здесь: https://docs.nativescript.org/angular/core-concepts/angular-navigation).

Проблема, с которой я столкнулся, заключается в том, что я не могу реализовать конфигурации рабочего маршрута в загруженном модуле.

В качестве упрощенного примера,мой компонент начальной загрузки находится в модуле приложения, а ленивый загруженный модуль - в модуле администратора.

в app-routing.module.ts, мои маршруты определены ниже: 

const routes: Routes = [
  { path: "admin", loadChildren: "~/app/admin/admin.module#AdminModule" },
  ...
];

в app.component.html, мой шаблон определен следующим образом: 

<RadSideDrawer ...>
  <GridLayout (tap)="goToModule('/admin')">
    ...
  </GridLayout>
  ...
</RadSideDrawer>

в admin-routing.module.ts, мои дочерние маршруты определены следующим образом: 

const routes: Routes = [
  { path: '', redirectTo: '/(tabOneOutlet:tabOnePath//tabTwoOutlet:tabTwoPath)', pathMatch: 'full' },
  { path: 'tabOnePath', component: TabOneComponent, outlet: 'tabOneOutlet' },
  { path: 'tabTwoPath', component: TabTwoComponent, outlet: 'tabTwoOutlet' }
];

admin.component template isопределяется следующим образом: 

<TabView androidTabsPosition="bottom">
  <page-router-outlet *tabItem="{title: 'ONE'}" name="tabOneOutlet"></page-router-outlet>
  <page-router-outlet *tabItem="{title: 'TWO'}" name="tabTwoOutlet"></page-router-outlet>
</TabView>

Причина, по которой я хочу использовать <page-router-outlet> в модуле администратора, заключается в том, чтобы использовать навигацию «Вперед» и «Назад» и использовать преимущества виджета Nativescript ActionBar, поскольку у меня несколькомодуль администратора.

(в соответствии с документацией Nativescript - «использование page-router-outlet дает дополнительное преимущество использования виджета ActionBar в вашем компоненте. В iOS виджет автоматически добавляеткнопка назад при переходе на вторую страницу.На Android страница-маршрутизатор-розетка использует аппаратную кнопку возврата, которая перемещает назад ваши компоненты. ')

При описанной выше конфигурации маршрута Angular выбрасывает Error: Cannot match any routes. URL Segment: 'tabOnePath'

Вотнекоторые из вещей, которые я пробовал.

  1. Я попытался реализовать <TabView> непосредственно в App.component.html, заменив <RadSideDrawer> с использованием фиктивных компонентов.Например,

App.component.html 

<TabView androidTabsPosition="bottom">
  <page-router-outlet *tabItem="{title: 'DUMMY ONE'}" name="dummyOneOutlet"></page-router-outlet>
  <page-router-outlet *tabItem="{title: 'DUMMY TWO'}" name="dummyTwoOutlet"></page-router-outlet>
</TabView>

App-routing.module.ts 

const routes: Routes = [
  { path: '', redirectTo: '/(dummyOneOutlet:dummyOnePath//dummyTwoOutlet:dummyTwoPath)', pathMatch: 'full' },
  { path: 'dummyOnePath', component: DummyOneComponent, outlet: 'dummyOneOutlet' },
  { path: 'dummyTwoPath', component: DummyTwoComponent, outlet: 'dummyTwoOutlet' }
];

И это работает.

Так как redirectTo принимает абсолютный путь, я также пробовал разные перестановки путей, но все равно получаю ошибку Cannot match any routes.

На данный момент, я получил модуль Admin для работы, непосредственно внедрив мойСелекторы компонента Admin внутри элементов вкладки и определения боковых маршрутов в admin-routing.module.ts.Но это не совсем то, что я хочу.

Буду признателен за любую помощь или общее направление.

1 Ответ

0 голосов
/ 02 мая 2019

Похоже, эта статья может быть полезной

https://www.nativescript.org/blog/using-nested-router-outlets-with-nativescript-and-angular

В нем говорится, что: «Именованные розетки маршрутизатора работают только с маршрутизатором-розеткой в ​​корне, так как страница-маршрутизатор-розетка каждый раз, когда мы называем навигацию, переходит на совершенно другую страницу».

Как я вижу в приведенных примерах, вы пытаетесь использовать <page-router-outlet> с именованными маршрутами.

...