angular - 在不相关的组件之间传递值
问题描述
我想要一个值从 Tabs 组件传递到 Task 组件,我创建了一个单独的数据服务。Tabs 中的值作为参数从其他组件中获取。在尝试将值从选项卡传递到任务组件时,它在任务页面中给了我“未定义”。
我的服务类
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);
推荐阅读
- javascript - 在模式上显示选定的图像
- angular - 使用本地编辑的 npm 包
- angular - 在 Angular 中发送批量电子邮件 UI 设计
- android - Android Wifi 扫描仪未在列表视图中显示结果
- aframe - Aframe弹药物理如何设置弹性或恢复?
- blockchain - 从其他区块链集成到 Chainlink
- reactjs - 使用 Gatsby Link 导航到 MDX 渲染页面
- c++ - SFINAE 确定函数是否编译?
- django - 根据 django 的情况,是否可以让模型引用许多其他模型?
- r - 将 {.tabset} 与 bookdown::bs4_book() 一起使用