Question

我正在尝试使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
          }
        ]
      }
    ]),

Answer 1

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

这是顶级组件，不应被视为子元素。

请参阅入门项目。

Ionic 4（Angular）<ion-router-outlet>无法正常工作

1 个答案: