Help Using EventEmitter with Tabs Component


#1

Hi,

I am trying to use EventEmitter in a component used as the root of a tab to emit events up to the parent component and I can’t get it to work (or am even sure if it can work).

What I’m doing at the moment (in brief)

In child

export class RegisterComponent {changetab: EventEmitter<any> = new EventEmitter(false); 
 {other logic}

private register (c) {
    this.registerService
        .register(c)
        .subscribe(//http should be returning an error at this point
          () => {},
          (res) => {
            console.log('registered', res);//this logs to console
            this.changetab.emit(1);//putting a break point here shows there are no observers attached to this
          },
          () => {}
        );
  }

In parent

    `<ion-tabs #homeTabs [selectIndex]="tabToShow" class="relative-tabs tab-bar-disable" style="height:50%;">
        <ion-tab (changetab)="tabSelect($event)" [root]="register"></ion-tab>
        <ion-tab [root]="login"></ion-tab>
      </ion-tabs>` 
export class HomePage {
  private login: any;
  private register: any;
  private tabToShow: number;

  @ViewChild('homeTabs') tabs: Tabs;

  constructor(public menu: MenuController, public navCtrl: NavController) {
      this.login = LoginComponent;
      this.register = RegisterComponent;
      this.tabToShow = 0;
  }

  public tabSelect (tab?: number) {
    if (tab !== null) {
      this.tabs.select(tab);
    }
    this.menu.close();
  }
}

I presume my issue is that I need to put the event handler on an actual instance of the register-component rather than just something which uses it, which is obviously not possible with tabs.

As you can see from the example, I am trying to get one tab to trigger the change to another tab. I understand that there are other ways of achieving this specific task but that isn’t really the point, I’m going to need to do this or something analogous to this further along the the line.

Is there some way of making this work and can anyone help?

Cheers


#2

Did you find solution for this? i am stuck in hiding tab-container elements on tab page events.