mat-selection-list替代复选框？

Question

相关：https://github.com/angular/components/issues/9739

我尝试了许多解决方案，包括隐藏复选框（以便可以替换with a new button）：

::ng-deep .mat-option:first-child .mat-pseudo-checkbox {
    display: none;
}

或来自https://stackoverflow.com/a/51942592：

:host {
    ::ng-deep.mat-pseudo-checkbox{
      display: none !important;
    }
}

以及其他各种技术……但没有一个能够成功删除该复选框。

我唯一能想到的就是弄乱ViewEncapsulation或使用mixins；就像Angular Material用来建立他们的网站一样：

https://github.com/angular/material.angular.io/blob/a742dc0/src/app/pages/component-viewer/_component-viewer-theme.scss

@mixin component-viewer-theme($theme) {
  // … prelude omitted for brevity

  guide-viewer,
  app-component-viewer {
    color: mat-color($foreground, text);

    .mat-tab-label:focus {
      color: mat-color($foreground, text);
    }
  }
}

…但是这需要像他们一样维护主题加载层次结构。有没有更简单/更好的方法？

Answer 1

您可以使用简单列表来“模拟”选择列表。

如果您有对象数组

typesOfShoes: any[] = [{data:'Boots'}, 
                       {data:'Clogs'}, 
                       {data:'Loafers'}, 
                       {data:'Moccasins'}, 
                       {data:'Sneakers'}]

您可以使用

<mat-list>
    <ng-container *ngFor="let shoe of typesOfShoes">
        <div class="mat-list-item mat-list-option mat-accent"
            [ngClass]="{'selected':shoe.selected,'notSelected':shoe.selected==false}">
            <mat-list-item (click)="shoe.selected=!shoe.selected">
                {{shoe.data}} - {{shoe.selected}}
            </mat-list-item>
        </div>
    </ng-container>
</mat-list>

以及您的.css，例如（*）

div.selected {
    animation-name: changeColorToIndigo;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
div.notSelected {
    animation-name: changeIndigoToColor;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes changeColorToIndigo {
    from {background-color: #00BBD2;}
    to {background-color: #3F51B5;}
}
@keyframes changeIndigoToColor {
    from {background-color: #3F51B5;}
    to {background-color: white;}
}

参见stackblitz中的示例

（（*）确保您可以改进.css（今天我不太受启发）以提供“一种动画”]

（**）您也可以使用角度动画