Ionic 3：设置根页面时传递数据答案

【问题标题】：Ionic 3: Passing Data when Setting the root pageIonic 3：设置根页面时传递数据
【发布时间】：2018-11-01 22:11:13
【问题描述】：

我正在检查一些本地存储信息，并根据我得到的信息加载相应的页面。

所以在我的app.component.ts 中，我有以下内容。

export class MyApp {
  rootPage: string;

 constructor(){
  if(dataFound)
   this.rootPage="HomePage"
  else
   this.rootPage="OtherPage"
  }
}

有没有办法在设置this.rootPage时传递数据。

请记住，这是应用的初始加载。如果在应用加载后发生这种情况，我可以执行this.navCtrl.setRoot()，这将允许我与页面一起传递参数。

感谢任何帮助。

谢谢

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

正如@gaborp 所说，但有一点不同：

在你的根目录中：

<ion-nav [root]="rootPage" [rootParams]="rootPageParams"></ion-nav>

this.rootPageParams = {'username': "David" }
在视图中你想读取那个参数（这就是区别）：

this.username = this.nav['rootParams'].username;

我读到的都是关于标签的，但对于简单的 ion-nav 却一无所知，所以我就是这样做的。

【讨论】：

在第 2 步中读回参数时，this.nav 指的是NavController 或NavParams?
指的是NavController
@rmalviya 感谢您对 NavController 的说明，它现在可以工作了。

【解决方案2】：

您也可以使用 NavParams：

this.rootPageParams = { 编号：“123”，名称：“卡尔” };

<ion-nav [root]="rootPage" [rootParams]="rootPageParams"></ion-nav>

然后从你的根页面访问参数：

让 id = navParams.get('id'); 让 name = navParams.get('name');

【讨论】：

那么如果我将根页面设置为“主页”，我可以访问参数吗？
是的。在您的 homepage.component.ts 中，您应该导入 NavParams： import { NavParams } from 'ionic-angular';然后注入它并访问参数： constructor(private navParams: NavParams) { let id = navParams.get('id');让 name = navParams.get('name'); }。您可以使用 ion-nav 组件设置 NavParams，如上例所示，或以编程方式设置，如 this.navCtrl.setRoot(this.rootPage,this.rootPageParams)

【解决方案3】：

离子 3：

所以，从你想设置OtherPage为新的根页面的页面开始，你可以写：

let rootPageParams = {'currentClusterID': 2 }
this.app.getRootNav().setRoot(OtherPage, rootPageParams);

然后，在OtherPage：

ngOnInit() {
     let currentClusterID = this.navParams.get('currentClusterID');
     console.log('# OTHER PAGE: currentClusterID', currentClusterID);
}

如果你想使用 html 模板来设置你的根目录而不是 typescript 你可以这样写：

.TS：

rootPage: any = OtherPage;
currentClusterID: number = 2;

.HTML：

<ion-nav 
    main #content 
        [root]="rootPage" 
        [rootParams]="{'currentClusterID':currentClusterID}">
</ion-nav>

【讨论】：

如果我设置了[rootPage]="tabsPage"，那么在tabsPage navParams 中没有通过rootParams 设置的参数。为什么？

【解决方案4】：

查看 Ionic Docs 中的 Events 部分。

您只需通过相同的操作即可将您的数据（如果找到）从RootPage 传递给您的OtherPage。

您也可以看看@sebaferreras 给出的这个answer 以获得更多了解

编码愉快！

【讨论】：

在 Ionic 5 中，事件已被弃用

【解决方案5】：

您可以为MyApp放置getter和setter函数，当您在其中导入MyApp组件时，其他组件可以访问这些函数，您可以通过它在组件之间传递数据

或者您可以使用@input 和@outputemitter 将它从父母传递给孩子，反之亦然

或者使用 Observable 装饰器服务在服务之间进行通信

【讨论】：