角度1.5組件沒有變量傳遞給組件

我是新來的.component（）在Angular 1.5+和我試圖在頂級應用程序控制器中創建數據，並將其傳遞給子組件。但是，打印到控制檯使我在下面的示例中未定義，我不知道爲什麼。角度1.5組件沒有變量傳遞給組件

的index.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>

app.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 
    } 
});

來源

2017-09-29 user441521

的問題是，在控制器您正在使用$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"; 
}]);

下面是一個工作示例。

JSFiddle Demo

來源

2017-09-29 13:48:44

啊，我在混合2種模式。非常感謝！ – user441521

@ user441521不客氣:) –

這是因爲你試圖過早地訪問它。有一個名爲$onInit的組件生命週期鉤子。所有綁定將在該函數中解析，因此您可以使用它來訪問您的name屬性。

嘗試修改您的控制器是這樣的：

controller:() => { 

    this.$onInit =() => { 
     console.log(this.name); 
    } 

}

來源

2017-09-29 13:05:19

這很有道理，但仍然沒有定義。 – user441521

當我從一個組件傳遞到另一個組件時它工作正常，但是當試圖將該頂層控制器變量傳遞給它未定義的組件時。 – user441521

$onChanges運行$onInit之前。使用這個代碼塊時，你的價值傳遞給您的組件，你可以簡單地檢查：

this.$onChanges = (changesObj) => { 
    if(changesObj.name && changesObj.name.currentValue) { 
     console.log(this.name); 
    } 
}

您可能需要採取進一步的看angularjs 1.5+組件的documentation

來源

2017-09-29 13:16:49 Korte

這不是打這個console.log（），但這是問題。爲什麼不把ng-controller變量傳遞給組件。我的意思是我知道這不是這就是爲什麼它給我不明確，但爲什麼以及如何讓它通過。 – user441521

角度1.5組件沒有變量傳遞給組件

回答

相關問題