角度动态组件 - 添加类和其他属性

Question

我使用以下代码来创建动态组件

import {
  Component, OnInit, ViewContainerRef, ViewChild, ViewChildren,
  ReflectiveInjector, ComponentFactoryResolver, ViewEncapsulation, QueryList, Input, AfterViewInit
} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { forEach } from '@angular/router/src/utils/collection';
import { IComponent } from 'app/app.icomponent';


@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'dynamic-component',
  entryComponents: [HomeComponent, HighlevelSignalComponent],
  template: `
    <div #dynamicDiv [ngClass]="classFromMenu" >
     <ng-template #dynamicComponentContainer></ng-template>
    </div>
  `,
  styleUrls: [
    './dynamic-content.component.css'
  ],
})

export class DynamicComponent implements IComponent, OnInit, AfterViewInit {
  classFromMenu: any;
 @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;


  constructor(private resolver: ComponentFactoryResolver, private route: Router,
    private activatedRoute: ActivatedRoute, ) {

  }

  .......

  buildComponent(passedData) {
   // orderAndObjs has the data for creating the component

      this.orderAndObjs.forEach(obj => {
        var componentFactory = this.resolver.resolveComponentFactory(obj.component);
        var compRef = this.dynamicComponentContainer.createComponent(componentFactory);


     // compRef is the component that is created.
//Assuming the component that i am trying to create is <dynamic-component>. 


  //I want to add either a class or any other attribute like this
//<dynamic-component class="flex">
      });

    }
  }

}

动态组件创建完美,一切都按预期工作.但唯一的问题是我想为动态组件添加一个类,以便它可以

<dynamic-component class="dynamicClass">

任何帮助表示赞赏:(

Answer 1

嗯..我通常将它添加到selector应该是entryComponent的组件中......

selector: 'dynamic-component.someclass',
                            ^^^^^^^^^^^

添加属性使用属性选择器:

selector: 'dynamic-component[myattr=value]',

我称之为entryComponents的隐藏功能

但它的声明性方法并不能在运行时更改(实际上我们可以更改它)

Answer 2

在 Angular 5/6 中，使用来自 @angular/core 的 Renderer2，您可以执行以下操作：

constructor(private resolver: ComponentFactoryResolver, private route: Router,
    private activatedRoute: ActivatedRoute, private renderer2: Renderer2) {

  }

buildComponent(passedData) {
  this.orderAndObjs.forEach(obj => {
    var componentFactory = this.resolver.resolveComponentFactory(obj.component);
    var compRef = this.dynamicComponentContainer.createComponent(componentFactory);
    this.renderer2.addClass(compRef.location.nativeElement, 'flex');
  });
}

Answer 3

使用Renderer2提供程序执行高级DOM操作.考虑到它被注入,它是:

this.renderer2.addClass(compRef.location.elementRef, 'dynamicClass');

应该注意的是,根据动态元素如何附加到DOM,这可能是不必要的复杂化.

考虑到这dynamicComponentContainer是真正的DOM元素而不是<ng-template>,动态组件的视图可以直接安装到容器,从而消除了<dynamic-component>包装元素:

鉴于容器:

<div class="dynamicClass" #dynamicComponentContainer></div>

这将是:

var compRef = componentFactory.create(
  this.injector,
  [],
  this.dynamicComponentContainer.element.nativeElement
);