Question

您好我想将用户ID（uid）从主页传递给用户详细信息页面。因为我在我的主页上显示多个用户我不想传递用户会话ID（由JSON.parse(localStorage.getItem("userData"));给出），我想点击主页上任何用户的名字并传递其ID和用户详细信息页面上的其他参数。

home.html做为 <p (click)="UserPage()" [innerHTML]="item.username | linky"></p>

home.ts

public userDetails: any;
public resposeData: any;
public dataSet: any;
public noRecords: boolean;
rootPage: any = HomePage;
pages: Array<{ title: string, component: any }>;
userPostData = {
uid: “”,
token: “”,
username: “”,
message: “”,
msg_id: “”,
title: “”,
description: “”,
media_pic: “”,
created:""
};

constructor(
    public common: Common,
    public navCtrl: NavController,
    public app: App,
    public menu: MenuController,
    public authService: AuthService,
    platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
) {
    const data = JSON.parse(localStorage.getItem("userData"));
    this.userDetails = data.userData;
    this.userPostData.uid = this.userDetails.uid;
    this.userPostData.token = this.userDetails.token;
    this.userPostData.username = this.userDetails.username;
    this.userPostData.msg_id = this.userDetails.msg_id;
    this.userPostData.message = this.userDetails.message;
    this.userPostData.title = this.userDetails.title;
    this.userPostData.description = this.userDetails.description;
    this.userPostData.media_pic = this.userDetails.media_pic;
    this.userPostData.created = this.userDetails.created;
    this.noRecords = false
    this.allArtists();

}

note: this is how i call the users via Auth Service

allArtists() {
this.common.presentLoading();
this.authService.postData(this.userPostData, “newsFeed”).then(

        result => {
            this.resposeData = result;
            if (this.resposeData.friendsNewsFeed) {
                this.common.closeLoading();
                this.dataSet = this.resposeData.friendsNewsFeed;
                console.log(this.dataSet);

            } else {
                console.log("No access");
            }
        },
        err => {
            //Connection failed message
        }
    );
}

UserPage() {
this.navCtrl.push(UserPage, { uid: this.userPostData.uid });

userProfile.ts

mport { NavController, App, AlertController, MenuController, NavParams } from “ionic-angular”;

export class UserPage {
public uid: string;

constructor(
public common: Common,
public navCtrl: NavController,
public app: App,
public menuCtrl: MenuController,
public navParams: NavParams,
public authService: AuthService
) {
this.uid = navParams.get(‘uid’);

        console.log(this.uid);
    this.userProfile();
}

}

AUTH-service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl = "http://localhost/PHP-Slim-Restful1/api/";
//let apiUrl = 'https://api.thewallscript.com/restful/';
/*
  Generated class for the AuthService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class AuthService {

  constructor(public http: Http) {
    console.log('Hello AuthService Provider');
  }

  postData(credentials, type){

    return new Promise((resolve, reject) =>{
      let headers = new Headers();
      this.http.post(apiUrl+type, JSON.stringify(credentials), {headers: headers}).
      subscribe(res =>{
        resolve(res.json());
      }, (err) =>{
        reject(err);
      });

    });

  }

}

Answer 1

使用NavParams，您已经以正确的方式完成了这项工作。

我看不到您的item结构如何。当您在主页上设置链接时，<p (click)="UserPage()" [innerHTML]="item.username | linky"></p>，您可以传递用户ID这个项目就像这样的函数：UserPage(user.uid)。

现在发生的事情是，您的UserPage函数已经获得了正确的uid，并且可以将其传递给详细视图。

Answer 2

好的，我得到了答案。您需要使用onclick传递参数。

home.html做为

home.ts

UserPage(uid_fk) {
this.navCtrl.push(UserPage, { uid_fk: uid_fk });
console.log(uid_fk);
}

离子 - 将数据传递到另一页

2 个答案: