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.


  • Onsen UI

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


Log in to reply