Nativescript angular 2 navigate topmost

Question

I tried to prevent go back in my native apps use NativeScript with angular2, and I tried to follow the documentation :: https://docs.nativescript.org/core-concepts/navigation#example-8--prevent-user-from-going-back-using-clearhistory-property and I'm getting an error once I run my app :

JS: Angular 2 is running in the development mode. Call enableProdMode() to enabl
        e the production mode.
        JS: ANGULAR BOOTSTRAP DONE.
        JS: EXCEPTION: Error: Failed to load Page from entry.moduleName: ListPage in [nu
        ll]
        JS: ORIGINAL EXCEPTION: Error: Failed to load Page from entry.moduleName: ListPa
        ge

This is my source code :

import {Component, ElementRef, OnInit, ViewChild} from "angular2/core";
import {TextField} from "ui/text-field";
import {Frame} from "ui/frame";
import {Grocery} from "../../shared/grocery/grocery";
import {GroceryListService} from "../../shared/grocery/grocery-list.service";
import frameModule = require("ui/frame");

var socialShare = require("nativescript-social-share");

@Component({
  selector: "list",
  templateUrl: "pages/list/list.html",
  styleUrls: ["pages/list/list-common.css", "pages/list/list.css"],
  providers: [GroceryListService]
})
export class ListPage implements OnInit {
  groceryList: Array<Grocery> = [];
  grocery: string = "";
  isLoading = false;
  listLoaded = false;
  topmost = frameModule.topmost();




  @ViewChild("groceryTextField") groceryTextField: ElementRef;

  constructor(private _groceryListService: GroceryListService) { }

  share() {
    let list = [];
    for (let i = 0, size = this.groceryList.length; i < size; i++) {
      list.push(this.groceryList[i].name);
    }
    let listString = list.join(", ").trim();
    socialShare.shareText(listString);
  }


  delete(grocery: Grocery) {
     this._groceryListService.delete(grocery.id)
       .subscribe(() => {
         var index = this.groceryList.indexOf(grocery);
         this.groceryList.splice(index, 1);
       })
   }

  add() {
    if (this.grocery.trim() === "") {
      alert("Enter a grocery item");
      return;
    }

    // Dismiss the keyboard
    let textField = <TextField>this.groceryTextField.nativeElement;
    textField.dismissSoftInput();

    this._groceryListService.add(this.grocery)
      .subscribe(
      groceryObject => {
        this.groceryList.unshift(groceryObject);
        this.grocery = "";
      },
      () => {
        alert({
          message: "An error occurred while adding an item to your list.",
          okButtonText: "OK"
        });
        this.grocery = "";
      }
      )
  }

  ngOnInit() {
    this.isLoading = true;
    this._groceryListService.load()
      .subscribe(loadedGroceries => {
      loadedGroceries.forEach((groceryObject) => {
        this.groceryList.unshift(groceryObject);
      });
      this.isLoading = false;
      this.listLoaded = true;
    });
    this.topmost.navigate({
        moduleName: "ListPage",
        clearHistory: true
    });

  }
}

I've been googling and couldn't get what I want. In this case, I use tutorial NativeScript with angular2

Community · Accepted Answer · 2017-05-23 12:09:46Z

1

By using new RouterExtensions class, you can disable backwards navigation per page. You can read more about RouterExtensions in the official docs.

You can view the sample code here

And I was also having this problem and have a partial solution in stackoverflow post

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Aug 13, 2016 at 16:54

artonio

1411 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikolay Tsonev · Accepted Answer · 2016-08-15 05:33:22Z

1

You could review the NativeScript with Angular - Navigation article and the given example in it

edited Aug 15, 2016 at 5:33

answered May 13, 2016 at 12:31

Nikolay Tsonev

1,9193 gold badges18 silver badges29 bronze badges

3 Comments

artonio Over a year ago

The link seems to be dead

Royi Namir Over a year ago

Too bad the docs says nothing about passing parameters back from page2 to page1 when back

RcoderNY Over a year ago

The updated link is: v7.docs.nativescript.org/angular/core-concepts/…

Vladimir Amiorkov · Accepted Answer · 2016-05-13 11:49:57Z

-1

In order to get the Page object into an Angular component you need to inject it to that components constructor:

import { Component, Inject, OnInit } from "angular2/core";
import { Page } from "ui/page";
...
export class ListPage implements OnInit {
    constructor( @Inject(Page) private page: Page) {
    }
}

After that you shouldn't have issues useing that Page object as usually in {N}.

answered May 13, 2016 at 11:49

Vladimir Amiorkov

2,9514 gold badges22 silver badges40 bronze badges

1 Comment

Medianto Jaelani Over a year ago

hi i use that code for prevent going back, when app enetring this module.. it's correct?

Collectives™ on Stack Overflow

Nativescript angular 2 navigate topmost

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related