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

Question

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

而且这篇参考资料似乎很旧，而且关于如何使用 jit 编译器的内容太多了

请注意，我从后端响应中获取的 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]})

或导入声明此指令的模块

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

Angular directive not working in dynamically loaded component

typescript

angular-directive

angular