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

Posted 2023-02-23

【中文标题】ion-router-outlet 未显示组件，但 router-outlet 显示

【英文标题】：ion-router-outlet not showing component but router-outlet does

【发布时间】：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>。你真的需要一张卡吗？

【参考方案1】：

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