Question

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

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

export class MyApp {
  rootPage: string;

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

设置this.rootPage时是否可以传递数据。

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

感谢任何帮助。

由于

Answer 1

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

在你的根目录中：

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

this.rootPageParams = {'username': "David" }
在视图中，您想要读取该参数（这是不同的）：

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

我读到的只是标签，但没有简单的离子导航，所以这就是我做的方式。

Answer 2

您也可以使用NavParams：

this.rootPageParams = { id：＆＃34; 123＆＃34;，姓名：＆＃34; Carl＆＃34; };

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

然后从根页访问params：

让id = navParams.get（＆＃39; id＆＃39;）; 让name = navParams.get（＆＃39; name＆＃39;）;

Answer 3

IONIC 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模板设置根目录而不是打字稿，则可以编写：

.TS：

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

.HTML：

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

Answer 4

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

或者您可以使用@input和@outputemitter

将其从父级传递给子级，反之亦然

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

Answer 5

查看Ionic Docs中的Events部分。

您只需浏览OtherPage即可将数据（如果找到）传递给RootPage。

您还可以查看@sebaferreras提供的answer以获得更多理解

快乐的编码！

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

5 个答案:

IONIC 3：