angular - 初始化后不刷新Ionic 3标签

每个选项卡用不同的NavPARAMs调用相同的组件“EnviutExtReimsStices”组件。异步数据（observate）从this.itemservice检索并按预期显示。
当我第二次切换到同一个选项卡时，问题就开始了。因为组件不再被调用，所以它显示相同的异步数据。因此选项卡视图未更新。
我想要的是每次单击选项卡时调用EviDebug组件。不仅仅是第一次点击。
将异步数据从父组件eventdetailcomponent传递到子组件eventdetailitemscomponent是否正确（onselect）=“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所建议的，事件解决了问题。您可以在下面找到用法：
根eventdetailcomponent-事件发布：

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

选项卡content eventdetailitemscomponent-事件订阅

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

最佳答案

似乎你需要知道如何在parent到child之间传递数据，这样你就可以使用input属性来完成。
选项1：
就你而言：

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

请参见offical doc here。
儿童.ts

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

母公司

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：使用Events