Question

我在离子项目中遇到了NavParams的一些奇怪问题。我可以将它从第一页传递到第二页，但是当试图将它从第二页传递到第三页时，它是未定义的。

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseService } from './../../providers/firebase-service/firebase-service';
import { Post } from '../../models/post/post.model';
import { Observable } from 'rxjs/Observable';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireObject } from 'angularfire2/database/interfaces';
import { User } from '../../models/user/user.model';
import firebase from 'firebase';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  userData: AngularFireObject<User>;
  posts$: Observable<Post[]>;
  checkRole: boolean = true;

  constructor(public navCtrl: NavController, private firebaseService: FirebaseService, private afAuth: AngularFireAuth) {
    this.posts$ = this.firebaseService
      .getPosts() // DB LIST
      .snapshotChanges() // Key and Value
      .map(changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      });
  }

  viewPost(post: Post) {
    this.navCtrl.setRoot('PostPage', { post: post });
  }

}

post.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Post } from '../../models/post/post.model';

@IonicPage()
@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
})
export class PostPage {
  post: Post;

  constructor(public navCtrl: NavController, public navParams: NavParams, private afAuth: AngularFireAuth) {
    this.post = this.navParams.get('post');
  }

  ionViewDidLoad() {
    console.log(this.post);
  }

  editPost(post: Post) {
    this.navCtrl.push('EditPostPage', { post: post });
  }
}

第2页上的所有内容都很好，控制台日志显示了所有正确的信息。

编辑post.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Post } from '../../models/post/post.model';
import { FirebaseService } from '../../providers/firebase-service/firebase-service';

@IonicPage()
@Component({
  selector: 'page-edit-post',
  templateUrl: 'edit-post.html',
})
export class EditPostPage {
  post: Post;

  constructor(public navCtrl: NavController, public navParams: NavParams, private firebaseService: FirebaseService) {
    this.post = this.navParams.get("post");
  }

  ionViewDidLoad() {
    console.log(this.post);
  }

  savePost(post: Post) {
    this.firebaseService.editPost(post).then(() => {
      this.navCtrl.pop();
    });
  }
}

这是奇怪的地方。我在第3页的this.item上未定义

node v.8.94
cordova@8.0.0
ionic@3.19.1

这是一个错误吗？请帮忙。

Answer 1

解决了

 editPost(post: Post) {
      this.navCtrl.push('EditPostPage', { post: this.post });
 }

navParams的奇怪错误

1 个答案: