html - Angular 2 将现有的 CSS 类应用于动态注入(inject)的组件

Question

我通过以下方式向 DOM 动态注入(inject)组件:

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 应用于动态注入(inject)组件的 :host css 标签。由于动态组件在注入(inject)之前未在 html 文件中定义，因此我无法应用现有的类样式，例如:class="vbox"。

这有可能实现吗？

谢谢。

Answer 1

你可以在动态组件里面添加

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

然后使用

启用它

comp.instance.isVboxClass = true;

或者只是

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