AngularJS 组件中 $apply 的替代方法是什么

Question

当我从项目列表中删除项目时。在浏览器上刷新需要时间。我找不到 $apply() 的任何替代方法。组件外部调用组件对象时的回调函数

import template from './itemListItems.html';

export const name = 'itemListItems';
export const itemListItems = {
    template,
    bindings: {
        listItems: '<',
        addNewItem: '&',
        editItem: '&',
    },
    controller: class ItemListItemsController {
        // @ngInject
        constructor(page) {
            this.page = page;
        }
        removeItem(indx) {
            var func = function (button) {
                if (button === 1) {
                    this.listItems.splice(indx, 1);// After removing itemlist, 
it takes few seconds to refresh on browser.                
                  }
            };
            navigator.notification.confirm(
                'Are you sure you want to remove this item?',
                func.bind(this),
                'Confirm Delete',
                ['Confirm', 'Cancel']
            );
        }
    }
};

我在这行有问题。 this.listItems.splice(index, 1); 删除项目列表后，需要几秒钟才能在浏览器上刷新。以前在 directove 模式下，我使用的是 $scope.$apply()。但是在组件中，$apply 不再可用。请问有什么解决办法吗？

Answer 1

无需刷新页面。如果您已经在 parent 组件中初始化数组，它应该会自动更新，因为数组是引用类型。

更好的方法是使用“&”绑定，例如您的 'addNewItem' 和 'editItem'。

它应该是这样的：

export const itemListItems = {
    template,
    bindings: {
        listItems: '<',
        addNewItem: '&',
        editItem: '&',
        onRemove:'&',
    },
    controller: class ItemListItemsController {
        // @ngInject
        constructor(page) {
            this.page = page;
        }
        removeItem(indx) {
            var func = function (button) {
                if (button === 1) {
                    this.listItems.splice(indx, 1);
                    this.onRemove(indx);

                  }
            };
            navigator.notification.confirm(
                'Are you sure you want to remove this item?',
                func.bind(this),
                'Confirm Delete',
                ['Confirm', 'Cancel']
            );
        }
    }
};

Parent- HTML:

<item-list-items list-items="yourlist" on-remove="removeFromList($event)"></item-list-items>

Parent-controller js:

//...
$scope.removeFromList = function (index) {
    $scope.yourlist.splice(index, 1)
}
//...

AngularJS 组件中 $apply 的替代方法是什么

What is the alternative of $apply in AngularJS Component

angularjs

angularjs-components