时间戳

首页 > 解决方案 > Angular 在带有引导程序的 mat 日期选择器中将列表显示为工具提示？

html - Angular 在带有引导程序的 mat 日期选择器中将列表显示为工具提示？

问题描述

我需要显示一个工具提示，它是悬停时的 Html 列表。

我可以显示突出显示的日期和一条简单的消息，但列表根本不会显示。它与引导程序有关。如果我删除引导程序，那么它会显示，但我需要应用程序中的引导程序。有没有办法在使用引导程序悬停时在工具提示中显示列表？

这是代码

export class DatepickerDateClassExample {
 list: string =
"Date - (3)<br/>" +
"Names - (4)<br/>" +
"Addresses - (25)<br>" +
"Values - (30)";

  constructor(private renderer: Renderer2) {}
  dates = [
       { date: "2020-04-20", text: this.list }
  ];
  dateClass = (d: Date) => {
    const dateSearch = this.dateToString(d);
    return this.dates.find(f => f.date == dateSearch)
      ? "example-custom-date-class"
      : undefined;
  };


  displayMonth() {
    let elements = document.querySelectorAll(".endDate");
    let x = elements[0].querySelectorAll(".mat-calendar-body-cell");
    x.forEach(y => {
      const dateSearch = this.dateToString(
        new Date(y.getAttribute("aria-label"))
      );
      const data = this.dates.find(f => f.date == dateSearch);
      if (data) y.setAttribute("aria-label", data.text);
    });
  }
  streamOpened(event) {
    setTimeout(() => {
      let buttons = document.querySelectorAll("mat-calendar .mat-icon-button");

      buttons.forEach(btn =>
        this.renderer.listen(btn, "click", () => {
          setTimeout(() => {
            //debugger
            this.displayMonth();
          });
        })
      );
      this.displayMonth();
    });
  }
  dateToString(date: any) {
    return (
      date.getFullYear() +
      "-" +
      ("0" + (date.getMonth() + 1)).slice(-2) +
      "-" +
      ("0" + date.getDate()).slice(-2)
    );
  }

CSS：

::ng-deep .example-custom-date-class {
          background: orange;
          border-radius: 100%;
        }

  .tooltip 
    {
      display: none;
      position: absolute;
      text-align: center;
      margin-top: 30px;
      width: 155px;
      padding: 10px;
      z-index: 2000;
      box-shadow: 0px 0px 4px #222;  
      border-radius: 10px;  
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
      background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  
      color: gray;   
    }


.tooltip:before {
  content: '';
  display: block;  
    position: absolute;
    left: 10px;
    top: -20px;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: #cccccc;
}

html:

<mat-form-field class="example-full-width" >
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker (opened)="streamOpened($event)" [dateClass]="dateClass" #picker panelClass="endDate" ></mat-datepicker>
</mat-form-field>


<div #toolTip class="tooltip" (mouseover)="onTool=true"
(mouseout)="onTool=false"
 [style.display]="show || onTool?'inline-block':'none'" [innerHTML]="toolTipMessage">
 </div>

这是堆栈闪电战

标签： htmlcssangular

解决方案

恐怕你不能使用简单的css，因为内容只承认\A换行但不可能使用attr - 它可能在内容中将que \A指示为字符串 - （并且不允许.html）

好吧，我们可以采取另一种方法，即使用作为工具提示的 div 并使用渲染器来监听 mouseout 和 mouseover

如果我们的 div 像

<div #toolTip class="tooltip" 
   (mouseover)="onTool=true"
   (mouseout)="onTool=false"
   [style.display]="show || onTool?'inline-block':'none'" 
   [innerHTML]="toolTipMessage">
</div>

并且有两个变量并使用 ViewChild 获取 div

@ViewChild('toolTip') tool:ElementRef
show:boolean=false;
onTool:boolean=false;

我们可以改变我们的函数 displayMonth 来添加 mouseover 和 mouse out

  displayMonth() {
    let elements = document.querySelectorAll(".endDate");
    let x = elements[0].querySelectorAll(".mat-calendar-body-cell");
    x.forEach(y => {
      const dateSearch = this.dateToString(
        new Date(y.getAttribute("aria-label"))
      );
      const data = this.dates.find(f => f.date == dateSearch);
      if (data) {
        this.renderer.listen(y, "mouseover", () => this.showTool(y, data.text));
        this.renderer.listen(y, "mouseout", () => this.hideTool());
      }
    });
  }
  showTool(y, data) {
    this.show = true;
    this.toolTipMessage = data;
    this.renderer.setStyle(
      this.tool.nativeElement,
      "top",
      y.getBoundingClientRect().y+ "px"
    );
    this.renderer.setStyle(
      this.tool.nativeElement,
      "left",
      y.getBoundingClientRect().x + "px"
    );
  }
  hideTool() {
    this.show = false;
  }

查看堆栈闪电战

推荐阅读