javascript - manipulation - propiedades de los compuestos covalentes

El contenido angular 2/iónico está detrás de la barra de inicio

Question

Tengo el problema de que traté de extraer la barra de encabezado en un componente propio, pero si uso este nuevo componente, el contenido de la página va detrás de la barra de encabezado.

Sin extraer el encabezado y usar el mismo código directamente en el HTML, funciona correctamente.

Mi nuevo componente:

header-bar.component.ts

import { Component, Input } from ''@angular/core'';

@Component({
  selector: ''my-header-bar'',
  templateUrl: ''header-bar.html''
})

export class MyHeaderBar {

   @Input() pageTitle : String;
   constructor() {}
 }

header-bar.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{pageTitle}}</ion-title>
 </ion-navbar>
</ion-header>

La página que trato de usar:

home.html

<my-header-bar  pageTitle="Einstellungen"> </my-header-bar>

<ion-content>
   <h2>Welcome to Ionic!</h2>
  <p>
   This starter project comes with simple tabs-based layout for apps
   that are going to primarily use a Tabbed UI.
  </p>
  ...
</ion-content>

¿Por qué no funciona con mi propio componente?

Answer 1

Estoy usando el siguiente código y no he tenido ningún problema hasta ahora. Intenté con seguir;

<ion-navbar navbar>
  <ion-title >{{title}}</ion-title>
</ion-navbar>

Lo siguiente es el código del archivo ts:

@Component({
    selector: ''navbar'',
    templateUrl: ''navbar.html''
})


export class CommonNavbar {
    public title: string;

    constructor(
        private nav: NavController) {

    }

    setTitle(title: string){
        this.title = title;
        console.log(this.title);
    }
}

Y usar esto de la siguiente manera:

<ion-header>
    <navbar></navbar>
</ion-header>

También agregué un poco de estilo a la barra de navegación común (como centrar el título) y lo configuré desde el componente / página usando el siguiente fragmento de código.

import { CommonNavbar } from ''../../components/shared_nav/navbar'';

@ViewChild(forwardRef(() => CommonNavbar)) commonNavbar: CommonNavbar;

 ngAfterViewInit() {
        this.commonNavbar.setTitle(title);
        this.commonNavbar.centerTitle(true);
 }

Answer 2

Traté de hacer lo mismo en una versión anterior de Ionic, y me enfrentaba a los mismos problemas. Le pregunté eso en el canal Ionic Slack y @mhartington (del equipo Ionic) dijo:

No hay forma de crear una barra de navegación iónica global, ya que esto se hace a propósito . El objetivo de tener una barra de navegación definida para cada componente es para que podamos animar correctamente los títulos, el color de fondo de la barra de navegación (si los cambia) y animar otras propiedades necesarias.

Y sobre la creación de una directiva personalizada para evitar la duplicación del código html ion-header / ion-navbar:

Eso seguirá generando errores con la forma en que funciona la proyección de contenido angular2. Tenemos varios problemas que se han abierto cuando la gente intenta esto y la mejor respuesta es no hacerlo .