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.