Ionic 3 选项卡在初始化后不会刷新

Question

每个选项卡使用不同的 navParams 调用相同的组件"EventDetailItemsComponent"。异步数据(可观察(从this.itemService检索并按预期显示。

当我第二次切换回同一选项卡时，问题开始了。由于不再调用组件，因此它显示相同的异步数据。因此，选项卡视图不会更新。

我想要的是每次单击选项卡时调用EventDetailItemsComponent。不仅仅是第一次点击。

将异步数据从父组件 EventDetailComponent 传递到子组件 EventDetailItemsComponent 的正确方法是否为 (ionSelect(="myMethod((">

<ion-tabs no-margin no-padding selectedIndex="1">
<ion-tab [root]="EventDetailItems1" [rootParams]="{itemTypeId:1, eventId: (eventDetail | async)?.id}" tabTitle="{{'ALL' | translate}}"></ion-tab>
<ion-tab [root]="EventDetailItems2" [rootParams]="{itemTypeId:2, eventId: (eventDetail | async)?.id}" tabTitle="{{'BOUGHT' | translate}}"></ion-tab>
<ion-tab [root]="EventDetailItems3" [rootParams]="{itemTypeId:3, eventId: (eventDetail | async)?.id}" tabTitle="{{'LEFT' | translate}}"></ion-tab>
</ion-tabs>

export class EventDetailComponent implements OnInit {
EventDetailItems1: any = EventDetailItemsComponent;
EventDetailItems2: any = EventDetailItemsComponent;
EventDetailItems3: any = EventDetailItemsComponent;
constructor(){ }
}

子组件 EventDetailItemsComponent 及其 HTML

@Component({
selector: 'event-detail-items',
styleUrls: ['/event-detail-items.scss'],
templateUrl: 'event-detail-items.html'
})
export class EventDetailItemsComponent implements OnInit, OnChanges  {
private _itemDetail = new BehaviorSubject<ItemViewModel[]>(null);
itemDetail = this._itemDetail.asObservable();
itemToggle: number = 0;
lastImage: string = null;
loading: Loading;
constructor(
public itemService: ItemService,
public eventService: EventService,
public navParams: NavParams,
public navCtrl: NavController,
public loadingCtrl: LoadingController,
private app: App) {
}
ngOnInit() {
let itemParams: GiftItemTabNavParams = JSON.parse(JSON.stringify(this.navParams.data));                
this.itemService.getItemList(itemParams.eventId, itemParams.itemTypeId).subscribe(x => {
this._itemDetail.next(x);
});
}
}

<ion-grid id="gift-list-grid">                
<ion-row class="gift-list-row" *ngFor="let giftItem of (itemDetail | async)" text-center bottom>
<ion-col (click)="toggleItemDescription(giftItem.id)" class="gift-item-col-item-pic" col-3>
<img src="{{giftItem.giftImagePath}}" />
</ion-col>
<ion-col (click)="toggleItemDescription(giftItem.id)" class="gift-item-col-detail" col-6>
<ion-label text-wrap class="gift-item-text" no-margin text-left>
<span>
{{giftItem.giftItemName}}
</span>
<span>
{{giftItem.brand}}
</span>
</ion-label>
</ion-col>
<ion-col (click)="toggleItemDescription(giftItem.id)" class="gift-item-col-gift-count" col-3>
<img src="./assets/img/inner-pages/gift_box.png" />
<p>
{{giftItem.amount}}
</p>
</ion-col>
<ion-col (click)="toggleItemDescription(giftItem.id)" *ngIf="itemToggle == giftItem.id" col-9>
<ion-label text-wrap class="gift-item-description" no-margin text-left>
<span>
{{giftItem.amount}} {{'AMOUNT' | translate}}
</span>
<span>
{{giftItem.description}}
</span>
</ion-label>
</ion-col>
<ion-col (click)="toggleBuyStatus(giftItem.id, giftItem.isBought, giftItem.giftStatus)" *ngIf="itemToggle == giftItem.id" class="gift-item-col-detail"  col-3>
<!--RESERVABLE ITEM-->
<img *ngIf="giftItem.giftStatus == 0" src="./assets/img/inner-pages/free.png" />
<!--CAN BE UNRESERVED-->
<img *ngIf="giftItem.giftStatus == 1" src="./assets/img/inner-pages/unreservable.png" />
<!--CAN NOT BE UNRESERVED-->
<img *ngIf="giftItem.giftStatus == 2" src="./assets/img/inner-pages/not-unreservable.png" />
</ion-col>
</ion-row>
</ion-grid>

更新：正如Sampath所建议的那样，事件解决了这个问题。您可以在下面找到用法：

根事件详细信息组件- 事件发布：

public eventTabsChanged(itemTypeId) {
let event = this._eventDetail.getValue();
this.events.publish('tab:clicked', itemTypeId, event.id);
}

选项卡内容事件详细信息项组件- 事件订阅

constructor(
public itemService: ItemService,       
public events: Events) {
events.subscribe('tab:clicked', (itemTypeId, eventId) => {
this.itemService.getItemList(eventId, itemTypeId).subscribe(x => {
this._itemDetail.next(x);
});
});
}

Answer 1

似乎您需要知道如何在parent到child之间传递数据。因此，您可以使用input属性来执行此操作。

选项 1：

在您的情况下：

<event-detail-items [itemDetail]="itemDetail"></event-detail-items>

请在此处查看官方文档。

儿童网

import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}

父.ts

import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
selector: 'hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<hero-child *ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</hero-child>
`
})
export class HeroParentComponent {
heroes = HEROES;
master = 'Master';
}

选项 2：使用事件