Question

我是Angular 1.5+中的.component（）的新手，我正在尝试在顶级应用控制器中创建数据，并将其传递给子组件。但是，在下面的示例中打印到控制台给我未定义，我不知道为什么。

的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
    }
});

Answer 1

问题是在控制器中你使用$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

Answer 2

这是因为你试图过早访问它。有一个名为$onInit的组件生命周期钩子。所有绑定都将在该函数中解析，因此您可以使用它来访问name属性。

尝试将控制器修改为以下内容：

controller: () => {

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

}

Answer 3

$onChanges在$onInit之前运行。您可以使用以下代码块检查何时将值传递给组件：

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

您可能需要进一步了解angularjs 1.5+组件'documentation

没有变量的Angular 1.5组件传递给组件

3 个答案: