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

Question

大家好，感谢您的时间！

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

我想将此数据传递给我的其他组件。 在谷歌搜索了很长时间后，我发现我应该使用服务，但它真的是共享数据的唯一选择吗？ 有人有这方面的例子吗？

ps：stackoverflow 上的一个答案说“您可以使用共享服务（使用 observable）或者您可以使用 ngrx/store。”

Answer 1

您可以从技术文档https://angular.io/docs 中学习角度特性

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

• 父/子组件如果要将对象从父组件发送到子组件，可以在子组件中使用@Input，如果要从子组件向父组件发送事件，则可以使用@Output（此事件可以带数据）
• 您可以在同一个 angular 模块中将事件发射器与 @Injectable 服务一起使用
• 如果要在客户端上保存数据，可以使用本地存储和会话存储
• 如果你想在服务器上保存数据，你可以使用 HTTP 或 WebSockets

Answer 2

现在，我设法使用本地存储来完成它，因此它可以工作。 这些天我仍然需要深入研究传递数据，以便在涉及 getter 和 setter 时更好地理解它。 现在它看起来像这样：组件 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');

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