Angular

Question

我有一个名为 [popover] 的基本 directive，它所做的就是注入（作为同级 ）- 一个动态组件。

我将其用作：

@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 {
}

结果：

问题是我想根据主办方更改弹出窗口的位置，恕我直言，在本例中是 elementRef.nativeElement

问题：

如何通过 CSS 将弹出窗口与托管商的右位置对齐？（ 甚至可以只用 css 吗？）

可以读取每个 elementRef 的位置并获取其尺寸。但是如何将新注入组件的位置设置为计算位置（这是每个按钮的右侧）？

FULL PLNKR

Answer 1

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

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

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

Angular - Align a dynamic directive's markup with the host?

javascript

angular-directive