Angular 1.5 组件未将变量传递给组件
[英]Angular 1.5 components not getting variable passed to component
问题描述
我是 Angular 1.5+ 中的 .component() 新手，我正在尝试在顶级应用程序控制器中创建数据，并将其传递给子组件。 但是，在下面的示例中，打印到控制台给了我 undefined ，我不知道为什么。
索引.html
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/angular.js"></script>
<script src="app.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="myApp" ng-controller="myController as vm">
<app name="vm.myName"></app>
</body>
</html>
应用程序.js
var app = angular.module("myApp", []);
app.controller("myController", ['$scope', function ($scope) {
console.log("myController!");
$scope.myName = "Rick";
}]);
app.component("app", {
template: '<h1>Hello World</h1>',
bindings: {
name: '='
},
controller: function () {
console.log(this.name); <-- prints undefined
}
});
3 个解决方案
解决方案1
1 已采纳 2017-09-29 13:48:44
问题是，在控制器中，您使用$scope来定义传递到组件中的变量，但是，在 HTML 的控制器块中，您使用this语法将变量传递到组件中。
所以问题所在。
app.controller("myController", ['$scope', function ($scope) {
console.log("myController!");
$scope.myName = "Rick";
}]);
这是一个标准的scope语法，但由于我们正在使用this语法，因此我们需要它。
app.controller("myController", ['$scope', function ($scope) {
console.log("myController!");
this.myName = "Rick";
}]);
下面是一个工作示例。
解决方案2
0 2017-09-29 13:05:19
这是因为您试图过早地访问它。 有一个名为$onInit的组件生命周期钩子。 所有绑定都将在该函数中解析，因此您可以使用它来访问您的name属性。
尝试将您的控制器修改为如下所示：
controller: () => {
this.$onInit = () => {
console.log(this.name);
}
}
解决方案3
0 2017-09-29 13:16:49
$onChanges在$onInit之前运行。 您可以使用以下代码块简单地检查您的值何时传递给您的组件：
this.$onChanges = (changesObj) => {
if(changesObj.name && changesObj.name.currentValue) {
console.log(this.name);
}
}
您可能想进一步查看 angularjs 1.5+ 组件的文档
来自子组件中父组件的Angular（1.5）JS访问变量？
[英]Angular (1.5) JS Access Variable from Parent Component in Child Component?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.