在没有父子关系的情况下将对象从一个组件传递到另一个组件答案

【问题标题】：Passing an object fom one component to another witchout parent-child relationship在没有父子关系的情况下将对象从一个组件传递到另一个组件
【发布时间】：2017-10-26 09:39:09
【问题描述】：

您好，我对How to pass a value from one component to another component Angular 2 (No parent child relationship) 有类似的问题。我有一个订阅服务的组件 .get 到服务器并从那里获取一个具有很少属性的对象。将此对象从组件1转移到与该警报方法没有父子关系的独立组件2是否合适？

【问题讨论】：

在 component2 中，我不想为 observable 订阅服务组件，因为它可能是昂贵的操作。我正在寻找将所需对象直接从组件 1 带到组件 2 的可能性。

标签： angular typescript

【解决方案1】：

我会使用服务在没有父/子关系的两个组件之间共享数据。将对象存储在服务中（由Component1触发，听上去很像），然后将服务注入到Component2中，从服务中抓取对象。

【讨论】：

这是一个案例。在 component2 中，我不想为 observable 订阅服务组件，因为它可能是昂贵的操作。我正在寻找将所需对象直接从组件 1 带到组件 2 的可能性。
为什么不让两个组件订阅同一个服务，以便它们可以独立地与之交互？

【解决方案2】：

在带有发射和广播的 Angular 1 中，我们实现了它以获取更多详细信息visit

<!DOCTYPE html>
<html>
<head>
 <title>Broadcasting</title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('app', []);
 
 app.controller("firstCtrl", function ($scope) {
 $scope.$on('eventName', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });
 
 app.controller("secondCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$emit('eventName', { message: msg });
 };
 });
 
 </script>
</head>
<body ng-app="app">
 <div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
 <h1>Parent Controller</h1>
 <p>Emit Message : </p>
 <br />
 <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
 <h1>Child Controller</h1>
 <input ng-model="msg">
 <button ng-click="handleClick(msg);">Emit</button>
 </div>
 </div>
</body>
</html>

【讨论】：