时间戳

首页 > 解决方案 > 离子 4（角）不能正常工作

angular - 离子 4（角）不能正常工作

问题描述

我正在尝试使 ionic 4 路由工作，这是我的家庭组件：

<ion-header>
  <ion-toolbar color="primary" class="animated fadeIn">
    <ion-buttons slot="start">
      <ion-menu-button color="secondary"></ion-menu-button>
      <ion-back-button>Back</ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding class="animated fadeIn login auth-page">
  <ion-router-outlet main></ion-router-outlet>
</ion-content>

这些是导航栏 html 文件：

<ion-menu-toggle auto-hide="false" *ngFor="let p of driverNavBarComponents">
    <ion-item [routerDirection]="p.direction" [routerLink]="[p.url]" color="primary">
      <ion-icon slot="start" [name]="p.icon"></ion-icon>
      <ion-label>
        {{p.title}}
      </ion-label>
    </ion-item>
</ion-menu-toggle>

这是 ts 文件中的 driverNavBarComponent：

public driverNavBarComponents = [
    {
      title: 'Home',
      url: '/driver/cabinet',
      icon:'home',
      direction:'root',
    },
    {
      title: 'Profile',
      url: '/driver/cabinet/profile',
      icon:'contact',
      direction:'forward',
    }
  ];

当我从不显示/driver/cabinet返回/driver/cabinet/profile按钮时。此外，当我从导航栏返回家中时，url 中的路线发生了变化，但我仍然看到个人资料页面。那我做错了什么？

这就是我的路由器模块的样子：

RouterModule.forChild([
      { 
        path: 'driver/cabinet', 
        component: DriverHomeComponent ,
        children:[
          {
            path: 'profile',
            component: DriverProfileComponent
          },
          {
            path: 'tracking',
            component: DriverTrackingComponent
          }
        ]
      }
    ]),

标签： angularionic-frameworkangular-routingionic4

解决方案

ion-router-outlet不属于离子含量。

它是一个不应该是子元素的顶级组件。

请参阅入门项目。

推荐阅读