Property 'pushComponent' does not exist on type 'OnsNavigator'
-
Trying to get navigation working with OnsenV2 with Angular 2. The docs say to use pushcomponent() when adding a component to the page stack. Im initializing like this in my home page and trying to navigate to another component called KeyEnterUPC.
export class HomePage { @ViewChild(OnsNavigator) private _navigator: OnsNavigator; constructor() {} pushUPC() { this._navigator.pushComponent(KeyEnterUPC, {animation: 'none'}, {key: 'value'}); } }
And the html
<ons-navigator> <ons-page> <ons-button (click)="pushUPC()" modifier="large--cta" style="background-color:orangered;"> Key Enter UPC </ons-button> </ons-page> </ons-navigator>
On loading the home page console says: /src/app/components/home/home.ts
(24,21): error TS2339: Property ‘pushComponent’ does not exist on type ‘OnsNavigator’.
I am certain I am importing the OnsNavigator component correctly and I am importing the
KeyEnterUPC component into the HomePage component. Help would be much appreciated.
-
@gciluffo It’s called
pushPage
since the last release. It’s updated in the reference.
-
Btw I may be wrong but I think with the last release it’s more like instead of having custom methods for Angular 2 you can access the core methods and they still work.
So something like
this._navigator.element.pushPage(KeyEnterUPC, {animation: 'none', data: {key: 'value'}});
You can find all the methods of the core navigator in the js reference here
-
@Fran-Diox @IliaSky Thank you! I got the pushPage() function working, it opens up the component I want. But I am getting an error when I push <ons-back-button> on that component. It says: Unhandled Promise rejection: popPage is already running. ; Zone: <root> ; Task: ons-back-button.addEventListener:click ; Value: popPage is already running.
For pushing I am doing a simple;
this._navigator.element.pushPage(KeyEnterUPC);
And there is a simple back button in the KeyEnterUPC component:
<div class="left"> <ons-back-button style="color: black;">Back</ons-back-button> </div>
The KeyEnterUPC component is wrapped in a <ons-page> element. Any idea to what this error might elude to? Thanks in advance.
-
Answering my own question here. The selector field in @Component needs to be called ‘ons-page’. I had the selector field set to a custom selector name. Changing it to ons-page fixed it.