Angular.JS 1.5.3组件和$ onChanges生命周期钩子不起作用

时间:2017-09-14 09:16:06

标签: angularjs components hook lifecycle

我想要实现的目标? 当 addComment 将信息发送到个人资料时,我希望评论框更新(添加新评论 - 工作正常!)并向下滚动以显示新评论(滚动不起作用)。

我解决问题的想法: 设置一个监听变化的生命周期钩子,即$ onChanges。当发生火焰well known滚动功能时。

当我更改配置文件组件中的注释但是更改来自子组件( addComment )时,所有操作均无效,并且$ onChanges不会触发,即使视图中的更改可见(注释为添加)。

组件树的一部分: components tree

代码:

父组件 - 配置文件(负责逻辑 - 组件控制器)

angular.module('myApp')
      .component('profile', {
        templateUrl: 'views/profile.html',
        controller: function (fetchData) {
          var vm = this;

          //Adds new comment to person object
          function addcomment(author, text){
            console.log('Pushed');
            var d = new Date(),
                avatar = author.toLowerCase().split(" ").join("");
            this.person.comments.push({
              author: author,
              avatar: 'images/' + avatar + '.jpg',
              creationDate: d.getTime().toString(),
              text: text
            });
          }

          this.addcomment = addcomment;
          fetchData.then(function(data) {
            vm.person = data[0];
          });
        }
    });

Child#1组件 - addComment (负责向父控制器发送数据(新评论))

angular.module('myApp')
    .component('addComment', {
      templateUrl: 'views/addComment.html',
      bindings: {
        onAddComment: '&'
      },
      controller: function(){
        this.text = "";
        this.author = "Test";
      }
    });

Child#2组件 - commentBox (负责在框中显示评论)

angular.module('myApp')
    .component('commentBox', {
      templateUrl: 'views/commentBox.html',
      bindings: {
        comments: '<',
        commentCount: '<'
      },
      controller: function() {
        this.$onChanges = function (changesObj) {
          //place to triger scroll function
          console.log('Changed');
          if (changesObj) {
            console.log('changed!');
          }
        };
      }
    });

0 个答案:

没有答案