剪切/移除 Angular CDK 阴影覆盖的某些部分

Question

我正在开发一个 Angular 6 项目。我已经为应用程序创建了一个演示模式，即具有下一个和上一个按钮的工具提示。当工具提示处于活动状态时，我已将 Angular CDK 覆盖附加到工具提示（下面的代码），这会使网站变得模糊。到现在为止，如预期的那样。现在，我想突出显示工具提示附加到的元素。

当前状态：

HTML

<div class="widget-toolbar pull-right">
<helpcomp-button  
              id="wiki1"
              [style]="{'width': 'auto'}"
              [label]="'?'"
              [mdePopoverTriggerFor] = "wiki1"
              [classes] = "'blue-green-transition'">
</helpcomp-button>
<mde-popover #wiki1="mdePopover" mdeFocusTrapAutoCaptureEnabled="true"
             [mdePopoverOverlapTrigger]="false" mdePopoverTriggerOn="disable"
             mdePopoverArrowWidth="15" mdePopoverArrowColor="#34ebe8">
  <mat-card style="
                  background:#34ebe8;
                  color:#1f27cc;" state-step=1>
    <mat-card-content>
      <button type="button" macocoTooltip state-step=3>To Personal</button>
      <button type="button" macocoTooltip state-step=4>To Faculty</button>
      <p> sample tooltip </p>
    </mat-card-content>
    <mat-card-actions>
      <button type="button" macocoTooltip>Previous</button>
      <button type="button" macocoTooltip>Next</button>
    </mat-card-actions>
</mat-card>

现在如何突出显示该元素？我正在尝试解决这个问题一天，非常感谢您的建议。谢谢。

Answer 1

你的意思是你想要“？”按钮出现在框阴影样式上？

尝试对元素应用“位置”样式，例如：

<helpcomp-button  
          id="wiki1"
          [style]="{'width': 'auto', 'position' : 'fixed'}"
          [label]="'?'"
          [mdePopoverTriggerFor] = "wiki1"
          [classes] = "'blue-green-transition'">
</helpcomp-button>

Answer 2

好吧，我基本上玩的是 CDKOverlay 对象。就我而言，我使用的是 mde-popover library。该库使用 CDK OverlayRef 对象，它们将弹出 TemplatePortal 附加到叠加层。

我已更改库代码以访问覆盖对象以及放置 popover 指令的 elementRef 并设置径向渐变。

代码如下：

库代码（popover-trigger.ts）：

/** Opens the popover. */
openPopover(): void {
if (!this._popoverOpen && !this._halt) {
  this._createOverlay().attach(this._portal);

  /** Only subscribe to backdrop if trigger event is click */
  if (this.triggerEvent === 'click' && this.backdropCloseOnClick === true) {
    this._subscribeToBackdrop();
  }

  $('.cdk-overlay-container').css('background', `radial-gradient(circle at ${this._elementRef.nativeElement.getBoundingClientRect().x}px ${this._elementRef.nativeElement.getBoundingClientRect().y}px, transparent, black)`);
  this._initPopover();
 }
}

编辑： 找到了更好的方法。不用jquery，最好用Renderer2类。

openPopover(): void {
  if (!this._popoverOpen && !this._halt) {
   this._createOverlay().attach(this._portal);

  /** Only subscribe to backdrop if trigger event is click */
  if (this.triggerEvent === 'click' && this.backdropCloseOnClick === true) {
    this._subscribeToBackdrop();
  }
  this._renderer.setStyle(this._overlayRef.overlayElement.parentElement.parentElement, 'background', `radial-gradient(circle at ${this._elementRef.nativeElement.getBoundingClientRect().x}px ${this._elementRef.nativeElement.getBoundingClientRect().y}px, transparent, black)`);
  this._initPopover();
}

}

所以，就是这样。希望这段代码对某人有所帮助！

• 干杯！！

Answer 3

问题在于 Angular CDK 覆盖位于 HTML 的不同根目录中，因此无法使用 z-index 方法突出显示后面的项目。 （因为z-index和他们的父亲有关）

我的建议对我很有用，就是使用叠加层在您要突出显示的元素之上绘制一个新元素。并使其相对于教程或信息工具提示，绝对与新元素相对。

在您的 HTML 上：

<helpcomp-button  
          #anchorPoint
          id="wiki1"
          [style]="{'width': 'auto'}"
          [label]="'?'"
          [mdePopoverTriggerFor] = "wiki1"
          [classes] = "'blue-green-transition'">
</helpcomp-button>

<ng-template #newElement>
  <div style="position: releative;">
    <helpcomp-button  
          id="wiki1"
          [style]="{'width': 'auto'}"
          [label]="'?'"
          [mdePopoverTriggerFor] = "wiki1"
          [classes] = "'blue-green-transition'">
    </helpcomp-button>

  <div style="position: absolute;">
    Tutorial message
  </div>
 </div> 
</ng-template>

在你的 TS 上：

@ViewChild('anchorPoint', { read: ElementRef }) anchorPoint: ElementRef<HTMLElement>;
@ViewChild('newElement') newElementTemplate: TemplateRef<any>;

const positionStrategy = this.overlay
    .position()
    .flexibleConnectedTo(this.anchorPoint)
    .withPositions([
      {
        originX: 'center',
        originY: 'center',
        overlayX: 'center',
        overlayY: 'center',
      },
    ]);

this.overlay.create({
  positionStrategy,
  hasBackdrop: true,
});

overlayRef.attach(new TemplatePortal(this.newElementTemplate, this.viewContainerRef));

看到叠加层将在您选择的 anchorPoint 元素的中心绘制元素。

请记住，您选择作为锚点的元素可能比它用于显示的宽度或高度更大，这意味着您可能需要查询 select 到 viewChild 元素内的元素以指向您真正需要的中心。