Question

我所面临的问题的背景是，我正在获取数据并将其附加到innerHTML的{{1}}中，并被附加，但是问题是自定义指令（div ，appdropzone，appdroppable） approvable片没有回应在研究之后，我发现它永远无法通过这种方式工作，我必须创建一个动态组件才能使自定义指令起作用。（也请让我知道这种方法是否行不通）

因此，我参考了Angular.io的动态组件部分，并对其进行了尝试，但是在行上却出现了错误

innerHTML`this.ads未定义

请有人指出这个问题吗？谢谢

控制台错误

const adItem = this.ads[data1];

代码

 ERROR TypeError: Cannot read property '<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,iVBORw0KGgoAAAANqyYtn1FAhKXkFi/hkQfuCuyO
 Lfk9ykpOc5CQnOcnR8n/9ySZhLa0CgAAAAABJRU5ErkJggg==&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>' of undefined

abc html

import { AdItem }      from './ad-item';
import { AdComponent } from './ad.component';
import { AvailableFloorDirective } from '@/shared/_directives';

export class abc implements OnInit {
    @Input() ads: AdItem[];
    @ViewChild(AvailableFloorDirective) availFloor: AvailableFloorDirective;
    gettingData() {
        this.xyzService('floorplans', (err, data1) = > {
                if (data1) {
                    const adItem = this.ads[data1];
                    const componentFactory = this.componentFactoryResolver.
                    resolveComponentFactory(adItem.component);
                    const viewContainerRef = this.availFloor.viewContainerRef;
                    viewContainerRef.clear();
                    const componentRef =
                        viewContainerRef.createComponent(componentFactory);
                    (<AdComponent>componentRef.instance).data = adItem.data;
    }

    }

   }

avail-floor.diecrtive

<div *ngIf="!onActive">
     <ng-template avail-floor></ng-template>
</div>

ad.component

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[avail-floor]'
})

export class AvailableFloorDirective {
    constructor(public viewContainerRef: ViewContainerRef){ }
}

ad-item.ts

export interface AdComponent {
    data: any;
}

应该渲染响应数据，并且我的指令应该在该渲染元素上工作。

Answer 1

显然，您的问题是未定义变量“ adds”，这是传递给您的“ abc”类的输入。因此，您应该检查此输入是否正确传递。到目前为止，这与动态组件实例化无关。

Nb：您的“ abc”类不是组件（缺少@component），因此，除非进行特殊配置，否则我认为它没有链接至任何模板，并且由于输入是通过模板传递的，因此这很可能是您输入的内容变量未定义。我建议参考一下： https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

在角度中附加动态分量的问题

1 个答案: