Question

我有app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

我也有detail.page.html

    <ion-content padding>
      <div *ngIf="invoiceDetailData$ | async as invoiceDetailData">
        <div *ngFor="let item of invoiceDetailData?.invoiceDetail?.items">
          <ion-label *ngFor="let child of item.children">
            {{child.cardName}}
            {{child.availableBalance}}
            {{child.cardNumber}}
          </ion-label>
        </div>
      </div>
      <div>
        <button *ngFor="let pages of detailPages">
          <span [routerLink]="[pages.url]">{{pages.title}}</span>
        </button>
      </div>
    </ion-content>

    <ion-router-outlet></ion-router-outlet>
</ion-app>

ion-router-outlet不起作用，但是在路由器中该值已推送。 ref不可点击！

Answer 1

您好Madi，要在ionic 4中使用离子路由器出口<ion-router-outlet>，您需要使用Angular路由器

创建app-routing.ts文件
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' }, { path: 'list', loadChildren: './pages/list/list.module#ListPageModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
在AppRoutingModule文件中添加app.module.ts
打开src/your component.html文件并放置这些内容
<ion-app> <ion-router-outlet></ion-router-outlet> </ion-app>

为什么离子路由器出口不能使用离子4

1 个答案: