我有一个导航,其中有两个页面代表两个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"
});
});
最佳答案
当 View 更改时, View 数据会被销毁。存储需要在服务的 View 之间保留的数据:
app.service("appData", function() {
var user;
this.setUser= val => user = val;
this.getUser= _ => user;
});
在组件 Controller 中使用该服务:
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();
}
});
欲了解更多信息,请参阅
关于javascript - 如何在 AngularJS 中的独立组件之间建立通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57699876/