如何在 AngularJS 中的独立组件之间建立通信

Question

我有一个 Nav，其中有 两个 页面代表两个 AngularJS 组件 - Home 和 About。我想将user 名称从Home 组件传递给About 组件。

<div ng-app="myApp">
  <ul>
    <li><a href="#!/home">Home</a>
    </li>
    <li><a href="#!/about">About</a>
    </li>
  </ul>
  <div ng-view></div>
</div>

我尝试使用bindings 和< 建立组件通信，但没有运气。基本上，它们都是独立的组件。在这种情况下，如何将数据从一个组件传递到另一个组件。

我使用CodePen 创建了一个工作示例。任何人都可以指导如何做到这一点。

组件和路由配置

app.component("home", {
  template: `<h1>Home</h1>
              Hi {{$ctrl.user}}!`,
  controller: function HomeController() {
    this.user = "John.";
  }
});

app.component("about", {
  template: `<h1>About</h1>`,
  controller: function AboutController() {}
});

app.config(function($routeProvider) {
  $routeProvider
    .when("/home", {
      template: "<home></home>"
    })
    .when("/about", {
      template: "<about></about>"
    })
    .otherwise({
      redirectTo: "/home"
    });
});

Answer 1

视图数据在视图更改时被销毁。存储需要在服务中的视图之间持久保存的数据：

app.service("appData", function() {
    var user;
    this.setUser= val => user = val;
    this.getUser= _ => user;
});

在组件控制器中使用该服务：

app.component("home", {
  template: `<h1>Home</h1>
              Hi {{$ctrl.user}}!`,
  controller: function HomeController(appData) {
    this.user = "John.";
    appData.setUser(this.user);
  }
});

app.component("about", {
  template: `<h1>About</h1>`,
  controller: function AboutController(appData) {
      this.user = appData.getUser();
  }
});

有关详细信息，请参阅

• AngularJS Developer Guide - Creating services

Answer 2

@georgeawg 已经充分回答了这个问题。但是我觉得在存储用户名或其他 userDetails 时应该使用 sessionStorage，因为当用户重定向到其他页面时，服务中的日期会被删除。因此在 sessionStorage 中存储一次会很有帮助。

// Create item:
var myObj = { username: 'admin', privilages: 'RAED' };
$window.sessionStorage.setItem(key, JSON.stringify(myObj));

// Read item:
var item = JSON.parse($window.sessionStorage.getItem(key));