Question

我使用Ionic 2 Rc2。我想为我的应用程序中的所有页面创建自定义导航栏。此导航栏的标题必须根据页面更改。我创建了navbar.ts和navbar.html。我的应用程序没有错误。

如果我在home.html中使用loadButton.setAlignment(Pos.CENTER_LEFT);，则将pageTitle设置为1.但如果我在home.html中使用<navbar [pageTitle]="1" ></navbar>，则pageTitle的结果未定义。

Navbar.ts

<navbar [pageTitle]="home page" ></navbar>

navbar.html

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

import { NavController } from 'ionic-angular';

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

export class CustomNavbar {

@Input() 
public pageTitle : string;

  constructor(public navCtrl: NavController) {
        console.log(this.pageTitle);
  }

}

home.html的

<ion-header>
   <ion-toolbar color="primary" no-border-bottom>
    <ion-buttons left>
      <button ion-button>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title  >{{pageTitle}}</ion-title>
    <ion-buttons right>
      <button ion-button>
        <ion-icon name="options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

这种情况 pageTitle 返回undefined。任何方案？感谢。

Answer 1

我想它应该是

<navbar [pageTitle]="'Home Page'"></navbar>

或

<navbar pageTitle="Home Page" ></navbar>

另见

input attribute does not receive data

Ionic 2 - 自定义组件@Input无法正常工作

1 个答案: