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

Question

我尝试过动态加载组件，内容正在加载，但自定义指令不起作用 我参考了

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 是

   <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 元素已加载，但我的自定义指令似乎不起作用。

Answer 1

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

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

或导入声明此指令的模块