Question

我正在Angular 8上开发应用程序。将其制作成多页，然后将参数传递给Router。我需要将数据从一页传输到另一页，如果我的页面没有以任何方式连接，该怎么办？所有页面均通过路由器出口加载。

我不使用parent.component-> child.component嵌套是不好的做法吗？

因为将来我需要将数据深入传输到我的库的应用程序中。 <my-library [data]="data"></my-library>

路线

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'progects/:id', component: ProgectsComponent},
  { path: 'progect/:id', component: ProgectComponent},
  { path: 'polls', component: PollsComponent},
  { path: 'poll/:id', component: PollComponent},
  { path: '**', redirectTo: '/' }
];

Answer 1

您有三种传输数据的方式。

使用Router.navigate（）

this.router.navigate(['/polls'], {
  state: {
      data: "some data which you want"
  }
});

并通过this.router.getCurrentNavigation().extras.state将其放入PollsComponent 但是YOU NEED TO GET THE DATA INTO CONSTRUCTOR of PollsComponent在角度救生钩上不存在，因为在路由器事件NavigationEnd之前一直存在。

使用queryParams

this.router.navigate(['/polls'], {
  queryParams: {
      data: "some data which you want"
  }
});

并通过ActivatedRoute.snapshot.queryParams

将其放入PollsComponent

使用Singleton服务   只需提供providedIn: root的服务并按属性存储它

但是刷新或用户删除queryParams（＃2方法）后，数据将丢失。

注意：

我建议您使用poll/:id之类的参数并获取ID到PollComponent onInit方法中，并使用该ID获取数据。在这种情况下，您可以在:id

中获得ActivatedRoute.snapshot.params

Answer 2

有很多方法可以在不同组件之间传输数据。选择的选项可能会根据您的目标而有所不同。

父母的子女：@Input()装饰师
子代为父：@Output()和EventEmitter
孩子对父母：@ViewChild()
不相关的组件：将数据作为服务共享。

您需要创建用于在不同组件之间共享数据的服务。

您可以查看此article以开始使用。

Angular 8如何在不相关的页面之间传输数据

2 个答案:

注意：