Javascript 动态更新AngularJS组件定义

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

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

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

是否有方法更新已在模块上注册的组件？还是有办法更新模块本身

到目前为止，我已尝试重新创建

组件

模块，如下所示：

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

但什么也没发生。 我还尝试在重新创建模块后重新编译元素。还是什么都没发生

我还尝试在创建模块后调用angular.bootstrap，但我发现如果不破坏引导的元素，这是不可能的。它抛出一个错误，说元素已经引导

---

我的目标是动态地更新组件定义，而无需重新加载页面。

我可以通过销毁引导元素，重新创建该元素，并使用新更新的模块和组件再次调用

angular.bootstrap

来实现这一点

下面是一个例子，
初始代码：

要更新

动态组件

， 重置并销毁引导元素。这样做将使我们能够再次在此元素上调用

angular.bootsrap

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

工作

---

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

组件只能在应用程序的配置阶段添加。一旦应用程序进入运行阶段，将无法再添加组件。了解要修改的组件的代码以及修改内容（大约）将非常有用。我可以想象一些方法来做你要求的事情，但我不知道它们是否适合你的组件的行为。@VirgilioGM组件和修改可以是任何东西。它不仅仅是组件的一个属性或功能。我正在寻找一种方法，以某种方式卸载组件，然后动态地将其带回来

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

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

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