Can't access @page instance inside custom component with native ionic2 directives

Hi everyone!

I’m trying to create a custom navigation bar with ion-segment and ion-menu directives (app/components/navigation/top-navbar)

For both ion-segment and ion-menu navigation I use the same openPage(name) method.

Home and settings pages both use top-navbar directive. Sign-in and no-navbar pages not included top-navbar.

Dependencies:

{
“angular2”: “2.0.0-beta.6”,
“es6-promise”: “3.0.2”,
“es6-shim”: “0.33.13”,
“ionic-framework”: “2.0.0-beta.0”,
“ionicons”: “3.0.0-alpha.3”,
“reflect-metadata”: “0.1.2”,
“rxjs”: “5.0.0-beta.0”,
“zone.js”: “0.5.14”
}

Repository with code example https://github.com/EugeneSnihovsky/ionic2-for-errors

Errors

  1. When I try to navigate to settings page from both ion-menu and ion-segment - I receive error
    EXCEPTION: Unexpected directive value ‘undefined’ on the View of component ‘SettingsPage’
    Stacktrace you can see on this screenshot.

  2. When I try to navigate to page without navbar (signInPage, noNavbarPage) from ion-menu component - all ok. But if I try to navigate with ion-segment - I receive error
    EXCEPTION: Attempt to use a dehydrated detector: TopNavBarComponent_0 → select
    Stacktrace you can see on this screenshot

Any idea why this happen? Thanks in advance.

this is due to bug in angular2

Ok, it sim’s to angular2 error for second exception. But first exception is from ionic2.
I’m simplify my project to show error. Maybe you have any idea why this happens?

I would ensure that ionic2 and angular2 versions are in sync - currently there is ionic2 beta1. Also I would check https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md as there are still changes that require to adjust components being used etc. Even then there are changes to some the ion component structure (i.e. ion-input, ion-radio and other elements moved to ion-item).

Thanks for your answer again.
The problem was in circular reference between components.

Maybe it will be helpful for others.
Solved by using forwardRef when injecting topNavbarComponent
directives: [forwardRef(() => TopNavBarComponent)]
Full answer here.

2 Likes

good to know, thanks for sharing! :slight_smile:

thakx @snikh this helps,save my day .thankx again.