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

Ionic Framework ionic-v3
1

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.

2

this is due to bug in angular2

3

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?

4

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).

5

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
6

good to know, thanks for sharing! :slight_smile:

7

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