javascript - Angular 2/Ionic Content 在 Headerbar 后面

Question

我遇到了一个问题，我试图将标题栏提取到自己的组件中，但如果我使用这个新组件，页面的内容就会放在标题栏后面。

无需提取 header 并直接在 HTML 中使用相同的代码即可正常工作。

我的新组件:

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>

我尝试使用的页面:

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>

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

Answer 1

我正在使用以下代码，到目前为止还没有遇到任何问题。我尝试了以下；

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

以下为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);
    }
}

并以下列方式使用它:

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

我还为通用导航栏添加了一些样式(例如将标题居中)，并使用以下代码片段从组件/页面对其进行了配置。

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

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

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