如何禁用mat-list-item的点击事件，只启用maticon的点击。

Question

Hi I am working on angular 5.I want to disable click event of mat-list-item want to enable only click action of mat-icon。

  <mat-nav-list>
            <mat-list-item
              *ngFor="
                let item of (speciality_list | listFilter: { name: searchText })
              "
              [class.disabled]="!item.status"
              [ngClass]="item.id == specialityActiveId ? 'active' : ''"
              (click)="onRowClick(item, 'speciality')"
            >
              <div matLine>
                <div fxLayout="row">
                  <div fxFlex="80">{{ item.name }}</div>
                  <div fxFlex="12" >
                    <button class="cursor-default"
                      mat-icon-button
                      (click)="edit($event, 'speciality', item)"
                    >
                      <mat-icon class="mat-17">edit</mat-icon>
                    </button>
                  </div>

                    <div fxFlex="8">
                      <button mat-icon-button mat-icon-button>
                        <mat-icon class="mat-17">arrow_forward_ios</mat-icon>
                      </button>
                    </div>

                </div>
              </div>
            </mat-list-item>
          </mat-nav-list>

谢谢你。

Answer 1

你可以通过这样做停止立即传播。

edit(event){
    event.preventDefault();
    // EDIT: Looks like you also have to include Event#stopImmediatePropagation as well
    event.stopImmediatePropagation();
}

我参考了下面的链接来解决这个问题。带辅助按钮的mat-nav-list