angular - 为什么 ion-router-outlet 不能工作 ionic 4

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

使用 Ionic Router socket <ion-router-outlet>在 ionic 4 中你需要使用 Angular router

• 创建 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>