在Angular 7的两个组件之间共享数据

Question

大家好，谢谢您的光临！

我正在创建一个带有角度7和路由的网站。在一个显示主页（默认视图）的组件中，我有一个输入，要求输入姓名。

我想将此数据传递给其他组件。搜寻了很长一段时间后，我发现我应该使用服务，但这真的是共享数据的唯一选择吗？有人举过这个例子吗？

ps：关于stackoverflow的一个答案是：“您可以使用共享服务（使用可观察的），也可以使用ngrx / store。”

Answer 1

您可以从技术文档https://angular.io/docs

了解角度特征

您可以根据期望和逻辑以几种方式共享数据：

• 如果要将对象从父对象发送到子组件，则父/子组件可以在子组件中使用@Input；如果要将事件从子对象发送到父（该事件可以带来数据），则可以使用@Output。
• 您可以在同一angualr模块中将事件发射器与@Injectable服务一起使用
• 如果要在客户端上保存数据，可以使用语言环境存储和会话存储
• 如果要在服务器上保存数据，可以使用http或websockets

Answer 2

就目前而言，我设法通过使用localstorage做到了这一点。 这些天我仍然需要深入研究传递的数据，以便更好地理解数据的获取和设置。 现在看起来像这样： 组件1 HTML：

<button (click)="saveData($event)" class="btn btn-outline-secondary" type="button"
            id="button-addon2">Send</button>

组件1 ts：

 saveData(){ localStorage.setItem('visitor', this.visitor);}

组件2 ts：

visitor = localStorage.getItem('visitor');

也许有人会发现它很有用。