在角度 2 中将数据从一个组件传递到另一个组件(不是父项到子项或子项到父项)

Question

你好，我是 angular 2 的新手。 我陷入了以下情况。我的主页组件中有一个 ul。我正在对工作描述进行Firebase API调用并将其存储到一个数组中，比如说一个作业数组，我在主页上显示数据，如下所示

<ul *ngFor = "let job of jobs " class="job-list" routerLink="jobdetails" >
    <div class="row">
      <div class="col-md-3">
        <li>{{job.nameOfThePost}}</li>
      </div>
      <div class="col-md-3">
        <li>{{job.lastDateOfApplication}}</li>
      </div>
      <div class="col-md-3">
        <li>{{job.noOfJob}}</li>
      </div>
      <div class="col-md-3">
        <li>{{job.educationalQualification}}</li>
      </div>
    </div>
  </ul>

单击UI的LI之一后，我想将用户带到一个新组件，例如JobDetails组件。现在我的问题是我想将数组传递给作业详细信息组件。由于 jobdetails 组件不是主页组件的子组件，如何将数据从主页组件传递到 jobdetails 组件。我发现的所有帮助都是关于如何将数据从孩子传递到父母或父母传递到孩子。我该怎么做？

Answer 1

要么选择将信息从一个组件共享到另一个组件的服务，如果是小型应用程序，则推荐使用，因为嵌套多个事件发射器不是处理数据的好方法。

另一种方式是 Redux方法 ，建议将其用于大中型应用程序的应用程序。这是存储和缩减器的概念，所有数据都在一个地方处理。当您必须在多个组件之间同步数据时，这非常有用。

take a look for further info

Answer 2

有

几种方法可以实现您的目标。 所有这些都涉及某种共享类。 正如@AJT_82已经建议的那样，对于刚接触Angular的人来说，共享服务将是最常见的方式。

另一种选择是使用 NgRX 并将状态信息推送到 NgRX 表中，当第二个页面到达该表时，该表可以订阅该表。

您可能还需要考虑只传递 ID 并在访问数据库时从数据库加载信息，以便数据不会过时