Angular 2 / Ionic Content落后于Headerbar [英] Angular 2 / Ionic Content is behind Headerbar

问题描述

我遇到的问题是我尝试将标题栏解压缩到自己的组件中，但如果我使用这个新组件，则页面内容会在标题栏后面。

I have the problem that I tried to extract the headerbar into a own component but if I use this new component the content of the page goes behind the headerbar.

如果没有提取标题并直接在HTML中使用相同的代码，它就可以正常工作。

Without extracting the header and using the same code directly in the HTML it works correctly.

我的新组件：

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() {}
 }

标题栏。 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>

我尝试使用它的页面：

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>

为什么它不适用于我自己的组件？

Why does it not work with my own component?

推荐答案

我试着在旧版本中做同样的事情Ionic的版本，我面临同样的问题。我问过Ionic Slack频道和@mhartington（来自Ionic团队）说：

I tried to do the same in an older version of Ionic, and I was facing the same issues. I asked that on the Ionic Slack channel and @mhartington (from Ionic team) said:

没有办法创建一个全局ion-navbar，因为这是在
目的上完成的。为每个组件定义导航栏的重点是
，我们可以正确设置标题，导航栏背景颜色（如果
更改它们）并为其他属性设置动画。

There is no way to create a global ion-navbar, as this is done on purpose. The point of having a navbar defined for each component is so that we can properly animate the titles, navbar background color (if you change them) and animate other properties needed.

关于创建自定义指令以避免重复ion-header / ion-navbar html代码：

And about creating a custom directive to avoid duplicating ion-header / ion-navbar html code:

这仍然会产生错误，因为angular2内容投影
的工作方式。 我们有几个问题在人们尝试这个
时已经打开，最好的答案是不这样做。

这篇关于Angular 2 / Ionic Content落后于Headerbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！