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

我通过以下方式将组件动态注入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=“vbox”

有可能做到这一点吗

---

谢谢。

您可以在动态组件中添加

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

然后使用

comp.instance.isVboxClass = true;

或者只是

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

---

谢谢你的回答。我希望将vbox类应用于主机标记本身，而不是应用于主机的子级。也就是说，我想应用一个现有的样式，而不是解决宿主内类的现有元素。谢谢，我明白了。我误解了这个问题。无论组件

组件
实际上是什么，都要添加它？是的。每个动态组件都有在样式URL中定义的特定css文件。我使用host标记在css文件中定义特定的样式规则，但是，由于规则vbox在其他组件中使用，所以它在其他css文件中指定。当在html中显式声明类时，所有这些都可以正常工作，但是对于动态组件，我不能显式指示在html中使用类vbox。您也可以使用
：host（.vbox）{…}
然后
…
将仅在类添加了
vbox
类时应用。我上面的回答有助于解决你的问题吗？从你上次的评论来看，我不确定。@HostBinding（'class.vbox'）效果很好。只有CSS才能达到同样的效果吗？也就是说，在组件代码中不包括@HostBinding（'class.vbox'）？非常感谢。