ion-router-outlet 未显示组件，但 router-outlet 显示答案

【问题标题】：ion-router-outlet not showing component but router-outlet doesion-router-outlet 未显示组件，但 router-outlet 显示
【发布时间】：2020-11-23 10:30:37
【问题描述】：

我正在尝试离子和角度路由，但遇到了一些问题。我有两个组件，第一个和第二个，以及 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 很陌生，这是我玩 Ionic 的第二天，所以我不太确定我哪里出错了。

如果缺少任何其他信息，请告诉我，我会补充。

提前致谢！

【问题讨论】：

问题不在你想的地方。以下是如何使用卡片：ionicframework.com/docs/api/card 如果没有<ion-card-content>，您将无法拥有<ion-card>。你真的需要一张卡吗？

标签： javascript angular ionic-framework routes components

【解决方案1】：

尝试这样的路线。这是离子默认方式。

【讨论】：