Ionic framework 如何在爱奥尼亚3中创建带有常用按钮和标题的动态导航栏？

我正在开发一个IONIC-3应用程序，无论我是否想要一个带有标题和普通按钮的动态导航栏。出于这个原因，我创建了一个名为 公共BTN.ts。这是代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
@Component({
  selector: 'common-button',
  templateUrl: 'commonBtn.html'

})
export class CommonBtnPage {
   constructor(public navCtrl: NavController) { }
   logOut() {
     this.navCtrl.setRoot(LoginPage);
   }
}

其html为：-

我想创建一个动态名称

通常，您需要使用decorator。检查

在CommonBtnPage中

import { Component,Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
@Component({
  selector: 'common-button',
  templateUrl: 'commonBtn.html'

})
export class CommonBtnPage {

   @Input()title:string;//here

   constructor(public navCtrl: NavController) { }
   logOut() {
     this.navCtrl.setRoot(LoginPage);
   }
}

在html中，设置标题

<ion-header>
    <ion-navbar>
        <ion-title>{{title}}</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="logOut()">
                <ion-icon name="log-out"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

{{title}}

您可以设置组件并将标题发送为：

<common-button [title]="'home'"></common-button>

不确定嵌套

ion header

将如何工作？有其他解决方案吗？看看这一点，并尝试询问这个爱奥尼亚论坛。请注意，爱奥尼亚团队不建议使用自定义组件作为应用程序的标题，并且可能会产生一些错误/问题（）