离子2 - 自定义组件@input工作不正常

Question

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

，如果我在Home.html中使用<navbar [pageTitle]="1" ></navbar>，PAGETITLE设置好的为1。但是，如果我在Home.html中使用<navbar [pageTitle]="home page" ></navbar>，PAGETITLE的结果不确定。

Navbar.ts

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); 
    } 

} 

navbar.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> 

home.html的

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

<ion-content padding> 
welcome 


</ion-content> 

这种情况下PAGETITLE回报不确定。任何方案？谢谢。

Answer 1

我想这应该是

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

或

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

参见

• input attribute does not receive data