AngularJS 自定义组件 - 未定义绑定

Question

在 AngularJS 中编写一个自定义组件，我想将一个名为 "parentview" 的属性传递给它。

我的代码如下

我的组件控制器中'parentview'的console.log()显示"undefined"...我不明白为什么。特别是考虑到 'user' 和 'limit' 显示得很好。

有什么线索吗？

谢谢

dashboard.html

<div>
    <suggested-sessions user="user" limit="3" parentview='Dash'></suggested-sessions>
</div>

建议的会话组件：

component('suggestedSessions', {
  bindings: {
    user: '<',
    limit: '<',
    parentview: '<'
  },
  template:
  `
    <div class="padding-container">
    <session-item-by-id ng-repeat="group in $ctrl.groups | orderBy:'preview.timestamp'" group=group limit="3" parentview="$ctrl.parentview"></session-item-by-id>
    </div>
  `,
  controller: function($q, $timeout, GroupService) {
    this.$onInit = function() {
      console.log('parent view: ', this.parentview);
    }
  }
 });

Answer 1

尝试使用 @ 而不是 < 来绑定您的字符串。

bindings: {
    user: '@',
    limit: '<',
    parentview: '@'
},

来自 AngularJS Components 文档：

@ bindings can be used when the input is a string, especially when the value of the binding doesn't change.

Answer 2

如果你想传递一个字符串，我认为你需要添加额外的引号

JSFiddle example

 <div>
   <suggested-sessions user="user" limit="3" parentview='"Dash"'></suggested-
    sessions>

 </div>

AngularJS 自定义组件 - 未定义绑定

AngularJS custom component - undefined binding

angularjs

angular-components