Angular指令在动态加载的组件中不起作用

时间:2019-07-29 13:04:37

标签: angular typescript angular-directive

我尝试动态加载组件,正在加载内容,但是自定义指令不起作用 我引用了

Dynamically load Angular 4 template using existing component and module

此参考文献似乎过时了,不知如何使用jit编译器

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

请注意,我从后端响应获取的myData是

$ cat test.txt | gcc -E -

我尝试使用一些随机html的代码也在模板中传递了我的自定义指令,模板加载了,但自定义指令不起作用

   <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元素,但我的自定义指令似乎无效。

1 个答案:

答案 0 :(得分:2)

在您的tmpModule中,您需要添加自定义指令声明

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

或导入声明此指令的模块