我有一个名为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 {
}
结果:
问题是我想根据主机改变弹出窗口的位置,在这种情况下,恕我直言elementRef.nativeElement
问题:
如何通过CSS将弹出窗口与主机的右侧位置对齐? (甚至可以仅使用css吗?)
可以阅读每个elementRef
的位置并获取其尺寸。但是,如何将新注入的组件的位置设置到计算的位置(是每个按钮的右侧)?
答案 0 :(得分:0)
尝试将position:relative
添加到<popover-window>
,然后您可以调整工具提示的偏移量
styles:[':host{position:relative;}']