Приложение Ionic 4 с боковым меню обновляет URL, но не отображает вид - PullRequest
Новая
       28

Приложение Ionic 4 с боковым меню обновляет URL, но не отображает вид

0 голосов
/ 05 июля 2019

Мой проект состоит из приложения Ionic 4 с боковым меню и двойной маршрутизацией, где по умолчанию маршруты: маршруты предназначены для входа в систему и меню, а другое - в папке меню.

Проблема в том, что когда я открываю меню бургера и щелкаю по любому элементу в нем, он изменяет URL, но не загружает представление. Тем не менее, когда я обновляю страницу браузера, то загружаю ее.

Итак, я попробовал это на тестовой странице:

a.page.ts 

ngOnInit() { console.log("onInit"); }
ionViewWillEnter() { console.log("will enter"); }
ionViewDidEnter() { console.log("did enter"); }
ionViewWillLeave() { console.log("will leave"); }
ionViewDidLeave() { console.log("did leave"); }
ngOnDestroy() { console.log("on destroy"); }

И печатает onInit , введет , а действительно введет на консоли, но, как было сказано ранее, представление не отображается.

Что, черт возьми, здесь происходит или как я могу заставить приложение загружать страницы нормально, без необходимости принудительно обновлять (не программно, а с помощью кнопки F5 ) браузер, пожалуйста?

Для получения дополнительной информации я добавлю все ниже.

Меню было сгенерировано как страница и имеет такую ​​структуру:

menu.page.html 

<ion-menu contentId="mainMenu" side="start" type="overlay">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle auto-hide="true" *ngFor="let route of routes">
        <!-- Uncomment any line below. The behavior is the same. -->
        <!-- <ion-item [routerLink]="route.url"> -->
        <!-- <ion-item (click)="goToPage(route.url)"> -->
          <ion-label>{{route.title}}</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet id="mainMenu" main><ion-router-outlet>

menu.module.ts 

[...]

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
      { path: 'a', loadChildren: '../a/a.module#APageModule' }
    ]
  }
];

[...]

menu.page.ts 

[...]

public readonly routes = [
  { title: 'home', url: '/menu/home' },
  { title: 'A', url: '/menu/a' }
];

public goToPage(url: string): void { this.router.navigateByUrl(url); }

[...]

Ионные детали: 

"@ionic/angular": "^4.6.0"
"@angular/router": "^7.2.2"
Ionic cli: 5.2.1

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Хорошо. Итак, как прокомментировал Джоэл Джозеф здесь , проблема в том, что тег <ion-router-outlet> в menu.page.html не закрыт. Остальная часть кода в порядке.

0 голосов
/ 05 июля 2019

Компонент меню находится под маршрутом '', а дочерний модуль APageModule - под маршрутом a, поэтому общий маршрут будет /a вместо /menu/a.

...