ion-router-outlet 未显示组件但路由器插座显示

Question

I'm experimenting with ionic and angular routing and have encountered some issues. I have two components, first and second, and the app-root component.

app.component.html:

<ion-app>
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Router App</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-card>
      <ion-card-header>
        <ion-card-title>Click To Navigate</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <a routerLink="first-component" routerLinkActive="active"><ion-button>First</ion-button></a>
        <a routerLink="second-component" routerLinkActive="active"><ion-button>Second</ion-button></a>
      </ion-card-content>
    </ion-card>
  </ion-content>
  <ion-card>
    <ion-router-outlet></ion-router-outlet>
  </ion-card>
  
</ion-app>

and app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: 'home-component', component: HomeComponent },
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The two components are simply

<p>componentName works!</p>

Now the issue I've got is the doesn't work and displays nothing when I click on the buttons to show the component. But, if I use the normal angular the components display at the very bottom of the page, leaving a big gap in the middle.

I'm quite new to Angular and this is my second day playing around with Ionic so I'm not too sure where I've gone wrong.

Let me know if any additional info is missing and I'll add it on.

Thanks in advance!

Answer 1

Try to route like this. This is ionic default way.