离子2:通过组件中的页面中获取输入文本字段

Question

这是我的搜索 page，其中我加载结果是for Cycle

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

我的目标是为guideView组件提供[(ngModel)]="room_name"：

@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，但我不知道如何接受。

Answer 1

在搜索页面此行

<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)=>{
        ....
    } 
}