Ionic2：コンポーネント

Question

することで、ページ内の入力テキストフィールドを取得これは私が

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

私の目標が利用できるようにすることですサイクルのために結果をロードする私の検索pageある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>

その後、私は次のコードで成分を返すにroom_nameを取ることができ

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

次のようになります。

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