ion-router-outlet不显示组件，但router-outlet显示组件

Question

我正在试验离子路由和角度路由，并且遇到了一些问题。我有两个组件，第一个和第二个，以及app-root组件。

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>

和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 { }

这两个组件只是

<p>componentName works!</p>

现在我遇到的问题是不起作用，当我单击按钮来显示组件时，什么也不显示。但是，如果我使用法线角度，组件显示在页面的最底部，在中间留下一个很大的间隙。

我是Angular的新手，这是我玩离子游戏的第二天，所以我不太确定我哪里出错了。

如果缺少任何其他信息，请让我知道，我会补充的。

提前感谢！

Answer 1

试着像这样路由。这是离子默认方式。

​