Simple page navigation in Angular 2



  • Hello all, im trying to get some simple page navigation going in OnsenV2 and Angular 2. I have a home page with a button, I want to be able to click that button and push a page of a different component to the stack and be able to navigate backward with the back button. When i press the button, the KeyEnterUPC component loads up. However, there is no default animation, and I am not able to navigate backward. Also when i press the button, the console says: EXCEPTION: Error: Uncaught (in promise): Error: You must supply an “ons-page” element to “ons-navigator”. Anyone have any idea as to why it isnt pushing to the stack properly? Help would be much appreciated. Here is the home page (home.ts)

    import {ONS_DIRECTIVES} from 'angular2-onsenui';
    import {MyApp} from './../app/app';
    import {KeyEnterUPC} from './../KeyEnterUPC/KeyEnterUPC';
    import {OnsNavigator} from "angular2-onsenui/dist/src/angular2-onsenui";
    import {Component, Inject, forwardRef, ViewChild} from '@angular/core';
    
    @Component({
      selector: 'ons-page',
      directives: [ONS_DIRECTIVES],
      template: `
             <ons-button  (click)="pushUPC()" modifier="large--cta" style="background-color:orangered;">
            </ons-button>
      `
    })
    export class HomePage {
      constructor(@Inject(forwardRef(() => OnsNavigator)) private navi : OnsNavigator) {
      }
    
      pushUPC() {
        this.navi.element.pushPage(KeyEnterUPC);
      }
    }
    

    And here is the component I want to load after pressing button (KeyEnterUPC.ts).

    import {ONS_DIRECTIVES} from 'angular2-onsenui';
    import {MyApp} from './../app/app';
    import {KeyEnterUPC} from './../KeyEnterUPC/KeyEnterUPC';
    import {OnsNavigator} from "angular2-onsenui/dist/src/angular2-onsenui";
    import {Component, Inject, forwardRef, ViewChild} from '@angular/core';
    
    @Component({
      selector: 'ons-page',
      directives: [ONS_DIRECTIVES],
      template: `
    <ons-page>
      <ons-toolbar style="background: transparent;">
        <div class="left">
          <ons-back-button style="color: black;">Back</ons-back-button>
        </div>
      </ons-toolbar>
      <div class="content">
          <h1>This is the EnterUPC Component</h1>
      </div>
    </ons-page>
      `
    })
    export class HomePage {
      constructor(@Inject(forwardRef(() => OnsNavigator)) private navi : OnsNavigator) {
      }
    }
    

    And finally the app component that contains the ons-navigator tags (app.ts)

    import {Component, Inject, forwardRef, ViewChild} from '@angular/core';
    import {ONS_DIRECTIVES, OnsSplitterContent, OnsSplitterSide, OnsNavigator} from 'angular2-onsenui';
    import {HomePage} from './../home/home';
    import {MenuPage} from './../menu/menu';
    import {AboutPage} from './../about/about';
    import {KeyEnterUPC} from './../KeyEnterUPC/KeyEnterUPC';
    
    @Component({
      selector: 'app',
      directives: [ONS_DIRECTIVES],
    template: `
    <ons-page>
      <ons-navigator page="home.html">
    
      </ons-navigator>
    </ons-page>
    
      `
    })
    export class MyApp {
    
    }
    

    Or, can anyone lead me to a simple example of pushing a component to the page stack besides in the monaca template?


  • Onsen UI

    @gciluffo Hello! I don’t know too much about Angular 2 yet but perhaps this can help you. If you are interested, you can get that template with Monaca CLI.



  • @Fran-Diox Thanks for the reply, but do you know of any other examples that have to do with navigating separate components?