Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 在非相关组件之间传递值_Angular_Typescript_Ionic Framework_Ionic3 - Fatal编程技术网

Angular 在非相关组件之间传递值

Angular 在非相关组件之间传递值,angular,typescript,ionic-framework,ionic3,Angular,Typescript,Ionic Framework,Ionic3,我希望将一个值从选项卡组件传递到任务组件,我创建了一个单独的数据服务。选项卡中的值作为参数从其他组件获取。在尝试获取并将值从选项卡传递到任务组件时,它在任务页面中给出了“未定义” 我的服务班 import { Injectable} from '@angular/core'; @Injectable() export class DataService { list:any; getUserData(){ return this.list; }

我希望将一个值从选项卡组件传递到任务组件,我创建了一个单独的数据服务。选项卡中的值作为参数从其他组件获取。在尝试获取并将值从选项卡传递到任务组件时,它在任务页面中给出了“未定义”

我的服务班

import { Injectable} from '@angular/core';  

@Injectable()
export class DataService {

   list:any;

   getUserData(){ 
      return this.list; 
   } 
   setUserData(data:any){
       this.list = data;
   }
}
选项卡组件

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { SettingsPage } from '../settings/settings';
import { TasksPage } from '../tasks/tasks';
import { DataService } from "../../services/data.service";

@Component({
  templateUrl: 'tabs.html',
  providers:[DataService]
})
export class TabsPage {

  tab1Root = TasksPage;
  tab2Root = SettingsPage;
  user:any;

  constructor(public navCtrl: NavController, public navParams: NavParams,public dataService: DataService) {

  this.user = navParams.get('param1');    
  this.dataService.setUserData(this.user);
  }
}
任务页

import { Component,ViewChild } from '@angular/core';
import { DataService } from "../../services/data.service";
import { TabsPage } from '../tabs/tabs';
import { TasksCreatePage } from '../tasks-create/tasks-create';

const logger = new Logger('Tasks');

@Component({
  selector: 'page-tasks',
  templateUrl: 'tasks.html',
  providers:[DataService]
})
export class TasksPage {
usern:any;

constructor(public dataService: DataService){
this.usern = this.dataService.getUserData();
console.log(this.usern);
}

我认为问题在于
navParams.get()
是一个异步函数。 替换此项:

this.user = navParams.get('param1').then( () => {
    this.dataService.setUserData(this.user);
});
为此:

this.user = navParams.get('param1');    
this.dataService.setUserData(this.user);

通过使用
providers:[DataService]
您可以创建
DataService
的单独实例,而不是使用singleton。谢谢,解决了我的问题。是的,我尝试创建单独的DataService实例,而不是使用singleton。谢谢