Question

我的项目由一个带有侧面菜单和双重路由的Ionic 4应用程序组成，其中默认的 routes：Routes 用于登录和菜单，另一个在菜单文件夹中。

问题是当我打开汉堡菜单并单击其中的任何项目时，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

Answer 1

菜单组件位于路由''下，子模块APageModule位于路由a下，因此总路由将是/a而不是{{1 }}。

Answer 2

好的。因此，正如乔尔·约瑟夫here所评论的那样，问题在于B处的<ion-router-outlet>标签没有关闭。其余的代码都可以。

带有侧面菜单的Ionic 4应用程序会更新URL，但不会更新视图

2 个答案: