Question

我正在寻找一种动态更新组件的方法，我有一个对象，其中包含有关组件的信息（名称，函数，变量，服务，模板，绑定等）。然后，我使用此数据动态生成组件。每当定义更改时，我都需要重新生成组件。

angular.module('components', [])
  .component('dynamicComponent', {
    bindings,
    template,
    controller
  })

angular.module('app', ['components'])

有没有一种方法可以更新已经在模块上注册的组件？还是有办法更新模块本身？

到目前为止，我已经尝试过像这样重新创建components模块：

angular.module('components', [])
  .component('dynamicComponent', {
     ...newData
  })

但是什么也没发生。重新创建模块后，我还尝试重新编译元素。仍然没有任何反应。

我还尝试在创建模块后调用angular.bootstrap，但是我发现如果不破坏自举的元素是不可能的。抛出错误，表明该元素已被引导。

我的目标是在不重新加载页面的情况下动态更新组件定义。

Answer 1

我可以通过销毁引导元素，重新创建该元素并使用新的更新的模块和组件再次调用angular.bootstrap来做到这一点。

这是一个例子，
初始代码：

<body>
  <div id="app" ng-controller="MainController as $ctrl">
    <dynamic-component data="$ctrl.data">
    </dynamic-component>
  </div>
</body>

angular.module('components', [])
  .component('dynamicComponent', {
    bindings: {...},
    controller,
    template
  })

angular.module('app', ['components'])
  .controller('MainController', ...)

angular.bootstrap(document.querySelector('#app'), ['app'])

要更新dynamic-component，重置并销毁自举元素。这样做将使我们能够再次在此元素上调用angular.bootsrap

document.body.innerHTML = `
<div id="app" ng-controller="MainController as $ctrl">
  <dynamic-component data="$ctrl.data">
  </dynamic-component>
 </div>
`

定义模块。在这里，我们可以根据需要更新旧的dynamic-component。我们还可以添加更多组件或模块。

angular.module('components', [])
  .component('newDynamicComponent', {
    bindings: ...newBindings,
    controller: newController,
    template: newTemplate
  })
angular.module('app', ['components', ...otherModules])
  .controller('MainController', ...)

angular.boostrap(document.querySelector('app'), ['app'])

工作example

如果有更好的方法，请告诉我。

动态更新AngularJS组件定义

1 个答案: