使用路由时使用 EventEmitter 在组件之间传递数据答案

【问题标题】：Passing data between components using EventEmitter when Routing is used使用路由时使用 EventEmitter 在组件之间传递数据
【发布时间】：2018-07-29 12:43:00
【问题描述】：

问题是当使用路由从父组件导航到子组件时是否可能以及如何使用 EventEmitter (@Output, @Input) 在组件之间传递数据。

例如，如果我不使用下面这样的路由，这是完全可行的。

<div class="container">
    <h1>RSVP</h1>
    <div class="row">
        <div class="col-lg-6">
            <app-events (eventClicked)="childEventClicked($event)"></app-events>
        </div>
        <div class="col-lg-6">
            <app-event-details [event]="clickedEvent"></app-event-details>
        </div>
    </div>
</div>

但是，如果我需要使用路由导航导航到 AppEventsComponent (app-events) 或 AppEventDetailsComponent (app-event-details)，这怎么可能？

【问题讨论】：

我相信你必须使用服务
没有。在这种情况下，您将在详细信息 URL 中传递单击事件的 ID，详细信息组件将使用 URL 中的 ID（从 ActivatedRoute 获得）从服务器获取详细信息。
你可以使用解析器

标签： angular angular5 angular6

【解决方案1】：

您可以使用本地存储将数据从一个组件传递到另一个组件，例如设置本地存储

localStorage.setItem("lastname", "Smith");

您可以使用

在其他组件中接收该值

localStorage.getItem("姓氏");

你可以通过其他方式在路由器参数中传递值，然后调用 api 来获取相同的数据

【讨论】：

【解决方案2】：

我想我对这个 Angular: Passing data or events from child to parent with router-outlet 也有同样的要求所以，对我来说更方便的是使用服务。

【讨论】：