Ionic 3 Tabs are not refreshed after initialized

Question

Each tab calls the same Component "EventDetailItemsComponent" with different navParams. And the async data (Observable) is retrieved from this.itemService and displayed as expected.

Problem starts when I switch back to the same tab the second time. Since Component is not called again, it displays the same async data. So tab view is not updated.

What I want is to call EventDetailItemsComponent every time a tab is clicked. Not just on the first click.

Would it be the right way to pass that async data from parent component EventDetailComponent to child component EventDetailItemsComponent with (ionSelect)="myMethod()"

    
        
        
        
    


    export class EventDetailComponent implements OnInit {

        EventDetailItems1: any = EventDetailItemsComponent;
        EventDetailItems2: any = EventDetailItemsComponent;
        EventDetailItems3: any = EventDetailItemsComponent;

        constructor(){ }
    }

Child Component EventDetailItemsComponent and its 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(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);
            });
        }
    }


                          
            
                
                    
                
                
                    
                        
                            {{giftItem.giftItemName}}
                        
                        
                            {{giftItem.brand}}
                        
                    
                
                
                    
                    
                        {{giftItem.amount}}
                    
                
                
                    
                        
                            {{giftItem.amount}} {{'AMOUNT' | translate}}
                        
                        
                            {{giftItem.description}}

UPDATE: As Sampath suggests, Events solved the problem. You can find the usage below:

Root EventDetailComponent - Event Publish:

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

Tab content EventDetailItemsComponent - Event Subscribe

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

Sampath · Accepted Answer

It seems you need to know how to pass data between parent to child.So you can do it using input properties.

Option 1:

In your case :

Please see the offical doc here.

child.ts

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'hero-child',
  template: `
    {{hero.name}} says:
    I, {{hero.name}}, am at your service, {{masterName}}.
  `
})
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: `
    {{master}} controls {{heroes.length}} heroes
    
    
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

Option 2: Using Events

Ionic 3 Tabs are not refreshed after initialized

Answers (1)

Related Questions