在不同的屏幕尺寸上用不同的绑定对同一元素进行角度划分

Question

我正在使用ng-bootstrap的工具提示。所以基本上在不同的屏幕尺寸上，我需要工具提示显示在不同的位置：

<span class="my-tooltip-lg" [placement]="'bottom'" #myTooltip="ngbTooltip"></span>
<span class="my-tooltip-sm" [placement]="'left'" #myTooltip="ngbTooltip"></span>

@media (max-width: 575px) {
.my-tooltip-lg {
display: none;
}
.my-tooltip-sm {
display: block;
}
}
@media (min-width: 576px) {
.my-tooltip-lg {
display: block;
}
.my-tooltip-sm {
display: none;
}
}

因此，我试图实现的是，在不同的屏幕尺寸上，只有一个可见span可用于工具提示。但是这样做的问题是我得到了以下错误：

Template parse errors: Reference "#myTooltip" is defined several times

所以我想知道我还能做什么？

Answer 1

您需要媒体观察者，请使用@angular/flex-layout，这将在屏幕尺寸发生变化时为您提供事件。

演示(要查看更改，请单击在新窗口中打开并通过调整窗口大小进行检查(

<div style="padding-left: 200px">
<button type="button" class="btn btn-outline-secondary" [ngbTooltip]="tipContent" [placement]="tooltipPosition">
Some Button
</button>
</div>

import { Component } from "@angular/core";
import { MediaObserver } from "@angular/flex-layout";
@Component({
selector: "ngbd-tooltip-basic",
templateUrl: "./tooltip-basic.html"
})
export class NgbdTooltipBasic {
tooltipPosition = "top";
constructor(private readonly mediaObserver: MediaObserver) {}
ngOnInit() {
this.mediaObserver.media$.subscribe(x => {
if (x.mqAlias === 'sm') {
this.tooltipPosition = 'left';
}
else {
this.tooltipPosition = 'bottom';
}
});
}
}