角度 2 | 如何根据创建组件的父级将样式设置为动态组件样式？

Question

我有以下 HTML：

  <ul infraTooltip toolTipOptions="{check: 1}">

我创建了一个指令，该指令在其主机上加载动态组件：

@Directive({
  selector: '[infraTooltip]'
})
export class InfraTooltipDirective {
  @Input() toolTipOptions: any =  {};

  constructor(private componentFactoryResolver: ComponentFactoryResolver,
              private viewContainerRef : ViewContainerRef ) {
  }

  @HostListener('mouseenter', ['$event', '$target'])
  showTooltip ($event) {
    this.loadContainerComponent();
  }
  @HostListener('mouseleave', ['$event', '$target'])
  hideTooltip ($event) {
    this.clearContainerComponent();
  }

  loadContainerComponent () {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipContainerComponent);
    let componentInstance =  this.viewContainerRef.createComponent(componentFactory);
    componentInstance.instance.toolTipOptions = this.toolTipOptions;
  }

我想根据指令的主机设置我的动态组件的样式- 在我的例子中是ul，以实现类似让我的动态组件离开：距 ul 10px 的效果。

Answer 1

这种机制称为视图封装。您可以在有关 View Encapsulation 的 Angular 文档中阅读更多内容。

父组件为子组件设置样式有两种可能的解决方案。

1. 关闭子组件中的视图封装
2. /deep/在 CSS 中使用选择器。