离子路由器出口未显示组件，但路由器出口有

Question

我正在尝试离子和角度布线，遇到了一些问题。 我有两个组件，第一个和第二个，以及应用程序根组件。

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一起玩，所以我不太确定自己哪里出了问题。

让我知道是否缺少任何其他信息，我将其添加到上面。

谢谢！

Answer 1

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