时间戳

首页 > 解决方案 > Angular Material Tooltip 向自身添加工具提示

angular - Angular Material Tooltip 向自身添加工具提示

问题描述

我可以以某种方式将组件内部的工具提示添加到自身吗？

例如，我有带有选择器“ app-call-card ”的组件CallCardComponent

我可以从渲染许多CallCardComponent的 CallsCardsComponent 添加工具提示，但可能从CallCardComponent中的 * .ts文件制作。

调用列表组件：

<div fxLayout="column" fxLayout.gt-sm="row" class="align-content-start">
  <!-- old -->
  <ng-container
    *ngIf="((service.oldCalls$ | async) | callsOrder:service.filters.orderBy:service.filters.orderDirectionAsc) as calls"
  >
    <ng-container *ngIf="calls.length > 0">
      <div
        class="d-inline-block p-2"
        [ngStyle.gt-sm]="'width: ' + 100 / $any(service.callsColumnsCount$ | async) + '%'"
        style="background-color: rgba(255, 0, 0, 0.3)"
      >
        <ng-container *ngFor="let call of calls; let i = index">
          <ng-container [ngSwitch]="call.callType">
            <crm-order-call-card *ngSwitchCase="callType.ORDER" [call]="$any(call)" [class.mt-2]="i > 0"></crm-order-call-card>
            <crm-acat-call-card *ngSwitchCase="callType.ACAT" [call]="$any(call)" [class.mt-2]="i > 0"></crm-acat-call-card>
            <crm-demo-call-card *ngSwitchCase="callType.DEMO" [call]="$any(call)" [class.mt-2]="i > 0"></crm-demo-call-card>
            <crm-online-call-card *ngSwitchCase="callType.ONLINE" [call]="$any(call)" [class.mt-2]="i > 0"></crm-online-call-card>
            <crm-key-call-card *ngSwitchCase="callType.KEY" [call]="$any(call)" [class.mt-2]="i > 0"></crm-key-call-card>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
  <!-- current -->
  <ng-container
    *ngIf="((service.currentCalls$ | async) | callsOrder:service.filters.orderBy:service.filters.orderDirectionAsc) as calls"
  >
    <ng-container *ngIf="calls.length > 0">
      <div
        class="d-inline-block p-2"
        [ngStyle.gt-sm]="'width: ' + 100 / $any(service.callsColumnsCount$ | async) + '%'"
        style="background-color: rgba(54, 155, 255, 0.3)"
      >
        <ng-container *ngFor="let call of calls; let i = index">
          <ng-container [ngSwitch]="call.callType">
            <crm-order-call-card *ngSwitchCase="callType.ORDER" [call]="$any(call)" [class.mt-2]="i > 0"></crm-order-call-card>
            <crm-acat-call-card *ngSwitchCase="callType.ACAT" [call]="$any(call)" [class.mt-2]="i > 0"></crm-acat-call-card>
            <crm-demo-call-card *ngSwitchCase="callType.DEMO" [call]="$any(call)" [class.mt-2]="i > 0"></crm-demo-call-card>
            <crm-online-call-card *ngSwitchCase="callType.ONLINE" [call]="$any(call)" [class.mt-2]="i > 0"></crm-online-call-card>
            <crm-key-call-card *ngSwitchCase="callType.KEY" [call]="$any(call)" [class.mt-2]="i > 0"></crm-key-call-card>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
  <!-- custom -->
  <ng-container
    *ngIf="service?.filters?.customDate &&
    ((service.customCalls$ | async) | callsOrder:service.filters.orderBy:service.filters.orderDirectionAsc) as calls"
  >
    <ng-container *ngIf="calls.length > 0">
      <div
        class="d-inline-block p-2"
        [ngStyle.gt-sm]="'width: ' + 100 / $any(service.callsColumnsCount$ | async) + '%'"
        style="background-color: rgba(0, 128, 0, 0.3)"
      >
        <ng-container *ngFor="let call of calls; let i = index">
          <ng-container [ngSwitch]="call.callType">
            <crm-order-call-card *ngSwitchCase="callType.ORDER" [call]="$any(call)" [class.mt-2]="i > 0"></crm-order-call-card>
            <crm-acat-call-card *ngSwitchCase="callType.ACAT" [call]="$any(call)" [class.mt-2]="i > 0"></crm-acat-call-card>
            <crm-demo-call-card *ngSwitchCase="callType.DEMO" [call]="$any(call)" [class.mt-2]="i > 0"></crm-demo-call-card>
            <crm-online-call-card *ngSwitchCase="callType.ONLINE" [call]="$any(call)" [class.mt-2]="i > 0"></crm-online-call-card>
            <crm-key-call-card *ngSwitchCase="callType.KEY" [call]="$any(call)" [class.mt-2]="i > 0"></crm-key-call-card>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
  <!-- payed -->
  <ng-container *ngIf="(service.payedCalls$ | async) as calls">
    <ng-container *ngIf="calls.length > 0">
      <div
        class="d-inline-block p-2"
        [ngClass.lt-md]="'order-first'"
        [ngStyle.gt-sm]="'width: ' + 100 / $any(service.callsColumnsCount$ | async) + '%'"
        style="background-color: rgba(255, 255, 0, 0.3)"
      >
        <ng-container *ngFor="let call of calls; let i = index">
          <ng-container [ngSwitch]="call.callType">
            <crm-order-call-card *ngSwitchCase="callType.ORDER" [call]="$any(call)" [class.mt-2]="i > 0"></crm-order-call-card>
            <crm-reg-card-call-card *ngSwitchCase="callType.REG_CARD" [call]="$any(call)" [class.mt-2]="i > 0"></crm-reg-card-call-card>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
  </ng-container>
</div>

标签： angulartypescriptangular-material

解决方案

a）你想做的事情是不可能的。没有可以将指令附加到的“主机”伪元素。

b）您可以简单地在组件内使用 width=height=100% 的顶级 div 来附加指令。

c) 由于您的控制流指令 (*ngFor?) 很可能在组件之外，为什么不在该级别添加工具提示指令？

如果可能的话，我会使用 c)。

推荐阅读