Ionic/Angular 导入组件覆盖页面

Question

我有一个 IONIC-Angular 应用程序，我在两个选项卡 - Tab1 和 Tab3 中使用相同的标题（带图像的 div，我的自定义元素）。问题是覆盖内容。我只看到我的标题 html 代码，没有看到 tab1 和 tab 3 html。

tab1.html | tab2.html    // Html content inside is different, "frame" below is the same

<ion-content [fullscreen]="true">

<app-header></app-header>

  <div class="cards">
    Here should be content, displayed below my Header
  </div>

</ion-content>

这里是 tab1.module.ts - 我导入我的 HeaderModule （头组件在那里声明） - 你可以猜到 - Tab3 模块几乎相同

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Tab1Page } from './tab1.page';
import { HeaderModule } from '../header/header.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    HeaderModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }])
  ],
  declarations: [
    Tab1Page,
  ],
})
export class Tab1PageModule {}

header.component.html - 下面是我的 HTML，它显示在 Tab1 中，但在它下面 - 我没有内容，我之前在 tab1.html 中有过，如上所述：“ 这里应该是内容，显示在我的 Header 下方“

<div class="image-header">
  <div class="logo">
    <span class="helper"></span>
      <img [src]="clubLogo">
  </div>
  <h3>{{ clubName }}</h3>
</div>
<ion-button class="login-button" fill="clear" (click)="onOpenMenu()">
  <ion-icon slot="icon-only" name="log-in"></ion-icon>
</ion-button>

  <ion-button class="info-button" fill="clear" (click)="onOpenMenu()">
    <ion-icon slot="icon-only" name="filter-outline"></ion-icon>
  </ion-button>

header.module.ts - 在这里我声明并导出我的组件，以便在我的应用程序中使用它 2 次（将来更多） - 正如这里所推荐的那样：

Component is part of the declarations of 2 modules in Angular

import {NgModule} from '@angular/core';

import {HeaderComponent} from './header.component';

@NgModule({
  declarations:[HeaderComponent],
  exports:[HeaderComponent]
})
export class HeaderModule
{
}

在描述问题的过程中，我正在考虑扭转想法 - 将我的标题作为主要内容并将 Tab1 和 Tab3 内容创建为两个独立的组件。

但这是一种临时解决方案...当我想多次使用组件时，我很高兴知道如何使用它。非常感谢您的任何回答！

IMG: What I am trying to do is marked on red - current Tab1 displaying. Using doesn't help

Answer 1

您应该使用 <ion-header> (...) </ion-header> 标记以在您的应用程序中显示标题。然后使用<ion-content> (...) </ion-content>显示内容。

如果您刚开始使用 Ionic，我建议您不要在这些页面中使用一个组件。您将来可能会更改您的头衔或其他内容。

你见过 Ionic-CLI 的标签框架吗？它使用选项卡和标题作为最佳实践。

<ion-header> (your header content here) </ion-header>
<ion-content> (your main content here) </ion-content>