Question

每个选项卡使用不同的navParams调用相同的组件“EventDetailItemsComponent”。并且从this.itemService检索异步数据（Observable）并按预期显示。

第二次切换回同一个标签时出现问题。由于未再次调用Component，因此它会显示相同的异步数据。因此标签视图不会更新。

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

使用（ionSelect）=“myMethod（）”将子异步数据从父组件EventDetailComponent传递到子组件EventDetailItemsComponent是否是正确的方法

    <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所说，事件解决了这个问题。您可以在下面找到以下用法：

Root EventDetailComponent - 事件发布：

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

标签内容 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);
                });
            });
        }

Answer 1

您似乎需要知道如何在parent到child之间传递数据。所以您可以使用input属性来实现。

选项1：

在你的情况下：

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

请参阅offical doc here。

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

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

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

1 个答案: