Директива Angular не работает в динамически загружаемом компоненте

Я попытался загрузить компонент динамически, контент загружается, но пользовательские директивы не работают, на что я ссылался

Динамически загружать шаблон Angular 4 с использованием существующего компонента и модуля

И эта ссылка кажется старой и подавляющей о том, как использовать jit-компилятор.

Как использовать / создавать динамический шаблон для компиляции динамического компонента с Angular 2.0?

Обратите внимание, что myData, который я получаю из ответа серверной части,

   <div xmlns="http://www.w3.org/1999/xhtml" _ngcontent-c18="" 
   appdropzone="" class="dropzone fs-settings__upload-section__floor-wrapper__preview- 
   image__image-area ng-star-inserted" id="toget" ng-reflect-ng-style=" 
   [object Object]"
   style="width: 100%; background-image: 
   url(&quot;data:image/png;base64,iVBORw0KGgoAAAANqyYtn1F
   AhKXkFi/hkQfuCuyO Lfk9ykpOc5CQnOcnR8n/9ySZhLa0Cg==&quot;); background- 
   repeat: no-repeat; background-position: center center; background- 
   size: 
   100% 100%;"><!--bindings={
   "ng-reflect-ng-for-of": ""
   }--><div _ngcontent-c18="" appdroppable="" appmovable="" class="box 
   draggable movable ng-star-inserted" touch-action="none"
  style="transform: translateX(136.8%) translateY(50.4%);"> vav3 </div> 
  <div _ngcontent-c18="" appdroppable="" appmovable=""
  class="box draggable movable ng-star-inserted" touch-action="none" 
  style="transform: translateX(837.6%) translateY(3.20003%);"> vav5 
  </div>
  <div _ngcontent-c18="" appdroppable="" appmovable="" class="box 
  draggable 
  movable
  ng-star-inserted" touch-action="none" style="transform: 
  translateX(639.2%) translateY(340.8%);"> vav54 </div>
  <div _ngcontent-c18="" appdroppable="" appmovable="" class="box 
  draggable movable ng-star-inserted"
  touch-action="none" style="transform: translateX(-288.8%) 
  translateY(276.8%);"> vav4 </div></div>

И код, который я пробовал с каким-то случайным html, также передает мою настраиваемую директиву в шаблоне, шаблон загружается, но настраиваемые директивы не работают

ngAfterViewInit() {
 let myData = '<div appMovableArea appDropzone (drop)="move(currentBox, 
    dropzone1)" class="dropzone" style="width:50%; height:50%"></div>'

 const template = myData;

 const tmpCmp = Component({template: template})(class {
 });
 const tmpModule = NgModule({declarations: [tmpCmp]})(class {
 });

 this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
    .then((factories) => {
        const f = factories.componentFactories[0];
        const cmpRef = f.create(this._injector, [], null, this._m);
        //cmpRef.instance.name = 'B component';
        this._container.insert(cmpRef.hostView);
    })
}

Элемент HTML загружается, но мои настраиваемые директивы не работают.


typescript angular angular-directive
person Enthu    schedule 29.07.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В вашем tmpModule вам нужно добавить объявление настраиваемой директивы

NgModule({declarations: [appDropzone, appMovableArea, tmpCmp]})

или импортируйте модуль, объявляющий эти директивы

person Saif Jerbi    schedule 29.07.2019
comment
в этой директиве вы вводите LocaleService ?? Если да, вам необходимо предоставить эту услугу. Импорт sharedModule в ваш tmpModule - это нормально, он работает для вас. Я думаю, теперь вы забыли предоставить LocaleService, поскольку в качестве исключения говорится, что DaterangepickerComponent нуждается в создании экземпляра LocaleService. - person Saif Jerbi; 29.07.2019
comment
На самом деле я думаю, что этот npm-модуль ngx-daterangepicker-material, который был импортирован в приложение и, в конечном итоге, в другие модули, выдает мне ошибку, я сделал то же самое и для этого динамического модуля, но не знаю, как решить эту проблему. - person Enthu; 29.07.2019
comment
@Enthu, вы должны добавить импорт NgxDaterangepickerMd в свой tmpModule - person Saif Jerbi; 29.07.2019
comment
Я добавил его в tmpModule, но после этого тоже получил ту же ошибку :). Я не использовал Jitcompiler, это может быть проблемой - person Enthu; 29.07.2019
comment
Не могли бы вы заполнить код на stackblitz? Так что я могу его отладить. Просто пример стороны Angular - person Saif Jerbi; 29.07.2019
comment
Вы можете положить его где угодно. У меня такое же поведение в реальном проекте, в котором я вызываю REST API, который возвращает мне шаблон Angular HTML для рендеринга. Итак, я создаю динамический компонент и модуль в блоке подписки наблюдаемого объекта, а после этого я ввожу динамический компонент с помощью ViewChild. В моем случае вызов службы находится на ngOnInit () - person Saif Jerbi; 29.07.2019
comment
Позвольте нам продолжить это обсуждение в чате. - person Enthu; 31.07.2019