如何在AngularJS中的獨立組件之間建立通信

Question

我有一個凈值 ，其中有代表兩個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開發人員指南-創建服務

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));