Question

我试图阻止在我的原生应用程序中使用带有angular2的NativeScript，我尝试按照文档:: https://docs.nativescript.org/core-concepts/navigation#example-8--prevent-user-from-going-back-using-clearhistory-property运行我的应用程序后出现错误：

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

这是我的源代码：

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
    });

  }
}

我一直在谷歌搜索，无法得到我想要的东西。在这种情况下，我使用带有angular2的教程NativeScript

Answer 1

您可以查看NativeScript with Angular - Navigation文章及其中的给定示例

Answer 2

通过使用新的RouterExtensions类，您可以禁用每页向后导航。您可以在官方文档中阅读有关RouterExtensions的更多信息。

您可以查看示例代码here

我也遇到了这个问题，在stackoverflow post

中有部分解决方案

Answer 3

为了将Page对象放入Angular组件，您需要将其注入该组件构造函数：

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

之后，您应该在{N}中使用Page对象时遇到问题。

Nativescript angular 2导航到最顶层

3 个答案: