Question

我可以以某种方式在组件内部添加工具提示吗？

例如我有带有选择器“app-call-card”

的组件CallCardComponent

我可以添加来自 CallsCardsComponent 的工具提示，渲染多个 CallCardComponent，但它可能来自 *< CallCardComponent 中的strong>.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>

Answer 1

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

b) 您可以在组件内简单地使用 width=height=100% 的顶级 div，将指令附加到该 div。

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

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

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

1 个答案: