时间戳

首页 > 解决方案 > 在角度附加动态分量的问题

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

问题描述

我面临的问题的背景是我正在获取数据并将其附加到innerHTMLadiv中，它正在被附加，但问题是该部分中的自定义指令 ( appdropzone, appdroppable, approvable)innerHTML没有响应所以在研究后我发现它永远不会工作这样，我必须创建一个动态组件才能使自定义指令正常工作。（也请让我知道这种方法是否也行不通）

因此，我参考了Angular.io的动态组件部分并进行了尝试，但我在网上遇到了错误

const adItem = this.ads[data1];`this.ads 未定义

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

控制台上的错误

 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

编码

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;
    }

    }

   }

abc html

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

可用地板.diecrtive

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

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

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

广告组件

export interface AdComponent {
    data: any;
}

广告项目.ts

import { Type } from '@angular/core';

export class AdItem {
   constructor(public component: Type<any>, public data: any) {}
}

响应数据应该被渲染，我的指令应该在那个渲染的元素上工作。

标签： angularangular-directive

解决方案

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

注意：您的“abc”类不是组件（缺少@component），因此除非特定配置，否则我猜它未链接到任何模板，并且由于输入是通过模板传递的，这可能是您的变量未定义的原因. 我建议参考这个： https ://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

推荐阅读