angular 同一元素在不同屏幕尺寸上具有不同的绑定

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

这里需要media observer，使用@angular/flex-layout，这会在屏幕尺寸发生变化时为您提供事件。

DEMO（要查看更改，请单击在新 window 中打开并通过调整 window 的大小进行检查）

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

angular 同一元素在不同屏幕尺寸上具有不同的绑定

angular the same element with different bindings on different screen sizes

ng-bootstrap

angular