Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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?
-
@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?