如何将数据从一个组件传递到另一个组件？

Question

我是angular的新手，我不知道如何使用路由器在两个组件之间传递数据。这是我的第一个组件视图，

当我按下查看报告按钮时，我需要使用第一个组件数据调用另一个组件。这是我的第一个组件视图报告单击按钮代码。

<button type="button" (click)="onFuelViewReport()"  class="btn btn-success ">
     <b>view Report</b>
</button>

单击按钮时，它在第一个组件中调用onFuelViewReport（）函数，并使用此函数打开带有新浏览器窗口（选项卡）的第二个组件视图。我要从此处将数据从第一个组件传递到第二个组件。请帮助我做到这一点。

onFuelViewReport() {
    this.router.navigate([]).then(result => {
      window.open("/pages/view-report", "_blank");
    });
  }

Answer 1

window.open看起来绝对糟糕。使用this.router.navigate(['/heroes']);。

因此，如果我正确理解您的项目清单，那么当您单击其中一个项目时，该项目的详细信息页面会打开吗？

最佳做法是允许详细路线设置属性。 Angular Routing & Navigation页面非常完整。它表明您应该使用:id-{ path: 'hero/:id', component: HeroDetailComponent }。当打开详细信息页面时，您将获得id变量，然后为其获取数据。