Angular - 将动态指令的标记与主机对齐?

时间:2017-05-31 21:02:22

标签: javascript angular angular-directive

我有一个名为directive的基本[popover],它所做的只是注入(作为兄弟) - 一个动态组件。

我用它作为:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button popover>Popover on right</button>   <-- here
    </div>
  `,
})

该指令的代码是:

@Directive({ selector: '[popover]'})
class Popover {
  private _component: ComponentRef<>;
    constructor(private _vcRef: ViewContainerRef, private _cfResolver: ComponentFactoryResolver,private elementRef: ElementRef) {
    }
    @HostListener('click')
  toggle() {
    if (!this._component) {
      const componentFactory = this._cfResolver.resolveComponentFactory(PopoverWindow);
      this._component = this._vcRef.createComponent(componentFactory);

    } else {
      this._component.destroy();
      this._component = null;
    }
  }
}

请注意,该指令动态创建一个注入的组件。这是注入的组件:

@Component({
  selector: 'popover-window',
  template: `
    <div class="popover popover-right">
      <h3 class="popover-title">My title</h3>
      <div class="popover-content">
        Lorem ipsum.... 
      </div>
    </div>
  `
})
class PopoverWindow {
}

结果:

enter image description here

问题是我想根据主机改变弹出窗口的位置,在这种情况下,恕我直言elementRef.nativeElement

问题:

如何通过CSS将弹出窗口与主机的右侧位置对齐? (甚至可以仅使用css吗?

可以阅读每个elementRef的位置并获取其尺寸。但是,如何将新注入的组件的位置设置到计算的位置(是每个按钮的右侧)?

FULL PLNKR

1 个答案:

答案 0 :(得分:0)

尝试将position:relative添加到<popover-window>,然后您可以调整工具提示的偏移量

 styles:[':host{position:relative;}']