2017-02-23 48 views
0

获得在一个页面输入文本字段这是我的搜索page,我加载搜索结果与对周期Ionic2:由组件

<ion-header> 
    <ion-navbar> 
     <ion-title>Search</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
<ion-list> 
    <ion-item> 
     <ion-input [(ngModel)]="room_name" type="text"></ion-input> 
    </ion-item> 
    <ion-list> 
     <guide-view *ngFor="let g of guideList" [guide]="g"></guide-view> 
    </ion-list> 
</ion-list> 
</ion-content> 

我的目标是使现有的[(ngModel)]="room_name"guideView组件:

@Component({ 
    selector: 'guide-view', 
    template: ` 
<ion-item> 
    <ion-thumbnail item-left> 
     <img src="{{guide.imagePreviewUrl}}"> 
    </ion-thumbnail> 
    <h2>{{guide.username}} {{message}}</h2> 
    <p>rate: {{guide.rate}}</p> 
    <button clear ion-button outline item-right icon-left (click)="engageGuide(guide.username)"> 
     <ion-icon name="arrow-dropright"></ion-icon> 
     Open Room 
    </button> 
</ion-item>` 
}) 
export class GuideView { 
    @Input() 
    guide: Guide; 
    message : any; 

    constructor(public navCtrl: NavController, public myService: MyServiceh) {}  

    engageGuide(guide: Guide): void{ 
     this.myService.openRoom(???room_name???,guide).subscribe((data)=>{ 
     .... 
    } 
} 

正如你所看到的,我需要输入文本的值,请致电openRoom,但我不知道如何接受它。

回答

0

在搜索页面此行

<guide-view *ngFor="let g of guideList" [guide]="g"></guide-view>

成为

<guide-view *ngFor="let g of guideList" [guide]="g" [room_name]="room_name"></guide-view>

然后我可以采取的成分,它的room_name用下面的代码:

export class GuideView { 
    @Input() 
    guide: Guide; 
    message : any; 
    @Input('room_name') = myRoom; 

    constructor(public navCtrl: NavController, public myService: MyServiceh) {}  

    engageGuide(guide: Guide): void{ 
     this.myService.openRoom(this.myRoom,guide).subscribe((data)=>{ 
     .... 
    } 
}