Question

我使用以下命令将组件动态注入DOM：

let factory  = this.componentFactoryResolver.resolveComponentFactory(component); 
let injector = ReflectiveInjector.fromResolvedProviders([], refDOM.parentInjector);
let comp     = factory.create(injector);
comp.changeDetectorRef.detectChanges();
refDOM.insert(comp.hostView,position);
return comp

我有一个css类：

.vbox {

       display: -webkit-box;
       display:    -moz-box;
       display:         box;

       -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
           -ms-box-orient: vertical;
               box-orient: vertical;


       display: -webkit-flex;
       display:    -moz-flex;
       display:     -ms-flex;
       display:         flex;

       -webkit-flex-direction: column;
          -moz-flex-direction: column;
           -ms-flex-direction: column;
               flex-direction: column;
}

我想将类vbox应用于动态注入组件的：host css标记。由于动态组件在注入之前未在html文件中定义，因此我无法应用现有的类样式，如：class =＆＃34; vbox＆＃34;。

有可能实现这一目标吗？

谢谢。

Answer 1

您可以在动态组件内添加

@HostBinding('class.vbox')
isVboxClass:boolean = false; // or true by default

然后使用

启用它

comp.instance.isVboxClass = true;

或只是

comp.location.classList.add('vbox');

Angular 2将现有的CSS类应用于动态注入的组件

1 个答案: