Question

我想要实现的目标？当 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!');
          }
        };
      }
    });

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

0 个答案: