ionic2 Angular - 导航问题答案

【问题标题】：ionic2 Angular -issue with navigationionic2 Angular - 导航问题
【发布时间】：2016-11-15 12:01:51
【问题描述】：

我正在尝试实现登录功能。

 import {Component} from "@angular/core";
    import {Header} from '../header/header';
    import {AuthenticationService, User} from '../../services/authService'
    import {DetailsPage} from '../details/details';
    import {UserProfilePage} from '../userprofile/userprofile';
    import {NavController,NavParams} from 'ionic-angular';
    import {NgIf} from '@angular/common';




@Component({
  templateUrl: 'build/pages/login/login.html',
  directives:[Header],
  providers: [AuthenticationService],
  styles:[' .login-home { align:center;margin-left:20px;}']
})

export class LoginPage {

   public user = new User('','');
   public errorMsg = '';
   public pageHeader:string;

    constructor(
        private _service:AuthenticationService,private nav: NavController) {
          this.pageHeader="Login"
          this.user = new User('','');
          this.nav = nav;

        }

    login() {
        this.nav.setRoot(DetailsPage);
        this.nav.push(DetailsPage);
        // let loginSucessful = this._service.login(this.user)
        /**  if(loginSucessful !== undefined && loginSucessful == false){
                this.errorMsg = 'Invalid login';
            }*/
    }

}

详情页如下-

import {Component,OnInit} from "@angular/core";
import {Header} from '../header/header';
import {HomePage} from '../home/home';
import {AuthenticationService, User} from '../../services/authService'
import {NavController,NavParams,Platform,Storage,SqlStorage,Toast} from 'ionic-angular';
import {NgIf} from '@angular/common';
import {PersonSO} from '../../services/personSO';



@Component({
  templateUrl: 'build/pages/userprofile/userprofile.html',
  directives:[Header],
  providers: [AuthenticationService]
})
export class DetailsPage implements OnInit{
    public pageHeader:string;
    public storage;
    public people =[];



   constructor(private platform: Platform,private navParams: NavParams,
        private _service:AuthenticationService,private nav: NavController) {
             this.pageHeader="List of user";
              this.platform.ready().then(() => {
                this.storage = new Storage(SqlStorage);
                this.nav = nav;        
            });


        }

   ngOnInit() {    
      this._service.checkCredentials();

  }
    goBack(){
           this.nav.push(HomePage);
    }
   navigateToUserForm(){
          this.nav.push(HomePage);
   }

   edit(person:PersonSO){
        this.nav.push(HomePage,{
         person: person
     });
   }

}

如果我转到主页的详细信息页面，这可以正常工作。但是在从登录页面导航时。我遇到了错误

11 756293 错误未捕获的异常：构建/pages/login/login.html 中的错误：17:20 原始异常：TypeError：无法读取未定义的原始堆栈跟踪的属性“参数”： TypeError：无法读取未定义的属性“参数” 在 ReflectionCapabilities.parameters (http://localhost:8100/build/js/app.bundle.js:29733:40) 在 Reflector.parameters (http://localhost:8100/build/js/app.bundle.js:29921:48) 在 CompileMetadataResolver.getDependenciesMetadata (http://localhost:8100/build/js/app.bundle.js:11007:86) 在 CompileMetadataResolver.getTypeMetadata (http://localhost:8100/build/js/app.bundle.js:10958:26) 在http://localhost:8100/build/js/app.bundle.js:11107:30 在 Array.map （本机）在 CompileMetadataResolver.getProvidersMetadata (http://localhost:8100/build/js/app.bundle.js:11095:26) 在 CompileMetadataResolver.getDirectiveMetadata (http://localhost:8100/build/js/app.bundle.js:10910:34) 在 RuntimeCompiler.resolveComponent (http://localhost:8100/build/js/app.bundle.js:14802:47) 在 NavController.loadPage (http://localhost:8100/build/js/app.bundle.js:46890:24) 错误上下文：

如果您对此有任何解决方案，请告诉我。

【问题讨论】：

标签： angular ionic2

【解决方案1】：

这里肯定有错误

@Component({
   templateUrl: 'build/pages/login/login.html',

您的templateUrl 不应从构建文件夹调用。

@Component({
   templateUrl: 'login.html',

您可以看到 ionic 如何使用 ionic CLI 构建页面结构

>_ ionic generate page login

然后需要在您的应用文件夹中的app.module.ts 文件中定义该页面。

【讨论】：