Angular 相同的元素在不同的屏幕尺寸上具有不同的绑定(bind)

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 ，这将在屏幕尺寸发生变化时为您提供事件。

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

<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';
      }
    });
  }
}