Динамическое обновление определения компонента AngularJS - PullRequest
Новая
       2

Динамическое обновление определения компонента AngularJS

2 голосов
/ 05 июня 2019

Я ищу способ динамического обновления компонента, у меня есть объект, содержащий информацию о компоненте (имя, функции, переменные, службы, шаблон, привязки и т. Д.). Затем я генерирую компонент динамически, используя эти данные. И мне нужно регенерировать компонент всякий раз, когда меняется определение. 

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

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

Есть ли способ обновить компонент, уже зарегистрированный в модуле? или есть способ обновить сам модуль?

До сих пор я пытался воссоздать модуль components следующим образом: 

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

но ничего не происходит. Я также попытался перекомпилировать элемент после пересоздания модуля. Все еще ничего не происходит.

Я также попытался вызвать angular.bootstrap после создания модулей, но обнаружил, что это невозможно без уничтожения элемента, загруженного при загрузке. Выдает ошибку, сообщающую, что элемент уже был загружен.

Моя цель здесь - динамически обновлять определение компонента, на лету, без перезагрузки страницы.

1 Ответ

0 голосов
/ 11 июня 2019

Я смог сделать это, уничтожив загруженный элемент, воссоздав этот элемент и снова вызвав 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'])

Работа пример

Если есть лучший способ, пожалуйста, дайте мне знать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...