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?