用路由离子4传递对象

Question

我对离子4很陌生，我想把一个物体从一个屏幕传递到另一个屏幕。我的第一个屏幕是screen1，我想将“screen1”类型的"model“对象传递给screen2。

目前，我正在使用下面的代码从我的screen1导航到screen2。

This.router.navigateByUrl(‘屏幕2/’)；

如何通过这个路径传递“模型”对象？

我在谷歌上搜索了一个解决方案，但没有发现任何与我的问题相关的问题。我只发现一件事，我们可以通过URL传递数据，使用queryparams，但是我想保持数据的私有性，而不想在URL中显示数据。

谁知道，我怎么能这么做？

Answer 1

我对你的建议是实现一个解析器

看看我的演示 at StackBlitz，看看它的实际效果。

实现解析器：

@Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private myService: MyService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    // return the data you need in your component using your service 
    // route params will sit in - route.params.id
  }
}

宣布：

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

使用它：

@Component({
  ...
})
export class TeamCmp {
  constructor(private activatedRoute: ActivatedRoute) {
    // the data sits here - this.activatedRoute.snapshot.data;
  }
}

Answer 2

您只需使用路由器导航就可以做到这一点

    this.router.navigate(['screen2', {modelName: model}]);

并由ActivatedRoute接收

    this.activatedRoute.snapshot.paramMap.get('modelName');

Answer 3

由于您的问题是“我如何从一个页面发送东西到另一个页面”，解决方案不必局限于使用路由器:另一个选择是使用存储。

import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';

blah() {
    this.storage.set('importantThing', this.importantThing);
    this.router.navigateByUrl('my-page/new-subpage');
}

然后在接收页面中：

await this.storage.get('importantThing').then(result => {
      this.importantThing= result;
      console.log('my importantThing is', this.importantThing);
    });

只是把它扔出去作为一种选择。它非常有用的方式，我的应用程序的结构。该项目将保留在后台存储，直到您删除它。也可能有用，也可能没用。取决于你需要什么，我想！希望它有用。