Ионный / Angular Импортируемый компонент перезаписывает страницу - PullRequest
Новая
       7

Ионный / Angular Импортируемый компонент перезаписывает страницу

0 голосов
/ 10 марта 2020

У меня есть приложение IONI C - Angular, где я использую один и тот же заголовок (div с изображением, мой пользовательский элемент) в двух вкладках - Tab1 и Tab3. Проблема в перезаписи контента. Я вижу только мой код заголовка html, ничего из tab1 и вкладки 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, как описано выше: «Здесь должен быть контент, отображаемый под моим заголовком» 

<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 раза в моем приложении (больше в будущем) - как было рекомендовано здесь:

Компонент является частью объявления 2 модулей в Angular

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

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

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

Во время описания проблемы я думал об изменении идеи - поместить мой заголовок в качестве основного компонента и создать Tab1 и содержимое Tab3 как два отдельных компонента.

Но это временное решение .. Я был бы рад узнать, как использовать компонент, когда я хочу использовать его более одного раза. Большое спасибо за любые ответы!

IMG: То, что я пытаюсь сделать, отмечено на красном - текущее отображение Tab1. Использование не помогает

1 Ответ

0 голосов
/ 10 марта 2020

Вы должны использовать тег <ion-header> (...) </ion-header> для отображения заголовка в вашем приложении. Затем используйте <ion-content> (...) </ion-content> для отображения содержимого.

Если вы начинаете с Ioni c, я советую вам не использовать один компонент для этих страниц. Вы можете изменить свой заголовок или что-то еще в будущем.

Вы видели скелет вкладок от Ioni c -CLI? В качестве передового опыта используются вкладки и заголовок. 

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