如何在 AngularJS 中的独立组件之间建立通信
How do I establish communication between independent components in AngularJS
我有一个 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"
});
});
当视图改变时视图数据被销毁。存储需要在服务中的视图之间保留的数据:
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();
}
});
有关详细信息,请参阅
@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));
我有一个 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"
});
});
当视图改变时视图数据被销毁。存储需要在服务中的视图之间保留的数据:
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();
}
});
有关详细信息,请参阅
@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));