单击材质图标时未触发“（单击）”事件答案

【问题标题】："(click)" event not triggered when clicking on a material icon单击材质图标时未触发“（单击）”事件
【发布时间】：2021-07-07 06:45:12
【问题描述】：

我创建了一个<a> 标记，它还提供了一个(click) 事件函数调用。

点击在任何地方都有效，即使对于所有子元素，除了以下箭头垫图标（完整视图请参见下面的代码）：

<span *ngIf="section.pages.length>0">
    <mat-icon *ngIf="section.id==id_focus">keyboard_arrow_down</mat-icon>
    <mat-icon *ngIf="section.id!=id_focus">keyboard_arrow_right</mat-icon>
</span>

我在这一切中做错了什么？

我的代码：

      <a mat-list-item class="text-light listitem" (click)="switchSub(section.id)" (mouseenter)="expandSub(section.id)">

        <div class="row">
          <div class="col-xs-2">

          <!--CLICK NOT WORKING FROM HERE...-->
            <span *ngIf="section.pages.length>0">
              <mat-icon *ngIf="section.id==id_focus">keyboard_arrow_down</mat-icon>
              <mat-icon *ngIf="section.id!=id_focus">keyboard_arrow_right</mat-icon>
            </span>
          <!--...TO HERE-->

            <ng-container *ngIf="section.pages.length<=0">
              &nbsp;
            </ng-container>
          </div>
          <div class="col-xs-3">
            <span><mat-icon>{{section.icon}}</mat-icon></span>
          </div>
          <div class="col-xs-7">
            <span *ngIf="isExpanded"> &nbsp; {{section.name}} </span>
          </div>
        </div>
      </a>

页面视图

其中(click)在蓝色方块上不起作用，也就是上面提到的材质图标。在其他任何地方，它都有效。
蓝色方块正确定位在父框内。

【问题讨论】：

您是否在 DOM 中检查了这些元素是否正在呈现？
同时检查这些图标的z-index
嗨@PardeepJain！是的，我向您确认元素在 DOM 中正确呈现
@PardeepJain 我用三个值编辑了 z-index：-1000、0 和 1000，但页面行为没有任何变化
你能在 stackblitz 上重现你的问题吗？在那里整理会更容易

标签： html angular angular-material

【解决方案1】：

这个问题似乎与*ngIf inside mat-icon 标签的使用有关。 IDK，如果它是一个有角度的材料错误或者它是想要的东西。

顺便说一句，将mat-icon标签的*ngIf移动到父亲ng-container上解决了这个问题。

我的最终工作代码：

  <ng-container *ngFor="let section of myRoutes">
    <ng-container *ngIf="section.name!='null'">

      <a mat-list-item class="text-light listitem" (click)="switchSub(section.id)" (mouseenter)="expandSub(section.id)">

        <div class="row">
          <div class="col-xs-2">

          <!--ADDED ng-container AND REMOVED ngIf from the mat-icon tag-->
            <span *ngIf="section.pages.length>0">
            <ng-container *ngIf="section.id==id_focus">
              <mat-icon>keyboard_arrow_down</mat-icon>
            </ng-container>
            <ng-container *ngIf="section.id!=id_focus">
              <mat-icon>keyboard_arrow_right</mat-icon>
            </ng-container>
            </span>
          <!---------------------------------------------->

            <ng-container *ngIf="section.pages.length<=0">
              &nbsp;
            </ng-container>
          </div>
          <div class="col-xs-3">
            <span><mat-icon>{{section.icon}}</mat-icon></span>
          </div>
          <div class="col-xs-7">
            <span *ngIf="isExpanded"> &nbsp; {{section.name}} </span>
          </div>
        </div>
      </a>

【讨论】：

【解决方案2】：

没有材料图标指令是否可以工作？

我今天遇到了一个奇怪的问题，mat-icon-button。

当我添加 mat-icon-button 指令时，材料样式出现了（所以我确定该模块已包含在内），但 (click) 事件不起作用。删除 mat-icon-button 指令会使其工作。

所以我有一个由模板属性驱动的按钮数组：

 <ng-container *ngFor="let breakpoint of breakpoints">

     <button mat-icon-button
             (click)="toggleVisibility(breakpoint)">
         <mat-icon [class.selected]="breakpoint.selected">{{ breakpoint.icon }}</mat-icon>
     </button>

 </ng-container>

在模板中get breakpoints() { ... } 每次都会返回相同的项目。

然而，肯定发生的事情（大致）是鼠标按下触发了一个更改检测周期，然后当 Angular 尝试运行其(click) 处理程序时该按钮不再存在。原生按钮不会发生这种情况。

对我来说，解决方法是将更改检测设置为 changeDetection: ChangeDetectionStrategy.OnPush。确保 breakpoints 属性返回相同的数组实例可能也会修复它。

说实话，最令人惊讶的是我以前从未遇到过这个特殊问题。如果您明白这一点 - 您的解决方案可能会有所不同，但了解问题是最重要的起点。

【讨论】：