动态设置按钮图标iConPositionEnd

Question

i我无法在按钮中以单个按钮中的图标位置为末端/启动，例如带有角度的Maticon属性IconPositionEnd。

I使用@Input（）CustomicOnpos创建了一个按钮组件：boolean = false;

import { Component, Input, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIcon, MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';

@Component({
  selector: 'button-with-loading-icon',
  standalone: true,
  imports: [MatButtonModule, MatIconModule, MatToolbarModule, MatIcon],
  templateUrl: './button-with-loading-icon.component.html',
  styleUrl: './button-with-loading-icon.component.scss',
})
export class ButtonWithLoadingIconComponent implements OnInit {
  @Input() btnText: string = '';
  @Input() customIconPos: boolean = false;
  @Input() icon: string = '';
  @Input() type: string = '';
  @Input() uiType: string = '';

  test = true;

  public ngOnInit() {}
}

在HTML中，我试图进行动态属性分配：

<button mat-button mat-stroked-button class="button button-draft">
 <mat-icon [iconPositionEnd]="customIconPos">save</mat-icon>
  Als Entwurf
</button>

但它说：不能与“ iConpositionEnd”结合，因为它不是“ Mat-icon”的已知属性。即使它具有不动态的静态方式，并且图标位于末尾。

<button mat-button mat-stroked-button class="button button-draft">
  <mat-icon iconPositionEnd>save</mat-icon>
  Als Entwurf
</button>

我也尝试了不同的方法

<button mat-button mat-stroked-button class="button button-draft">
  <mat-icon [attr.iconPositionEnd]="customIconPos"  >save</mat-icon>
  Als Entwurf
</button>

or

<button mat-stroked-button class="button button-draft">
  <mat-icon [iconPositionEnd]="customIconPos ? true : false" >save</mat-icon>
  Als Entwurf speichern
</button>

他们没有工作。无法在堆栈或网络上找到任何解决方案。
当然，我想到的一种解决方案是一个解决方案，但是我不喜欢这种方法，并且想在我的项目中使用自定义属性来进行模块化原则。

<button mat-stroked-button class="button button-draft">
  <mat-icon *ngIf="customIconPos" mat-icon iconPositionEnd>save</mat-icon>
  <mat-icon *ngIf="!customIconPos" mat-icon>save</mat-icon>
  Als Entwurf speichern
</button>

thanks！ 问候，祝您有美好的一天，Greyluk

看源代码，它似乎使用以下行将其投影到按钮组件中。

Answer 1

<span
    class="mat-mdc-button-persistent-ripple"
    [class.mdc-button__ripple]="!_isFab"
    [class.mdc-fab__ripple]="_isFab"></span>

<ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])">
</ng-content>

<span class="mdc-button__label"><ng-content></ng-content></span>
<!-- inserted below -->
<ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]">
</ng-content>

这没有评估

[attr.iconPositionEnd]="customIconPos"

或

[iconPositionEnd]="customIconPos ? true : false"

，因此据我所知，最好的解决方案就是编写手动添加属性的IF IF。

<button mat-button mat-stroked-button class="button button-draft">
  @if(customIconPos) {
  <mat-icon iconPositionEnd>save</mat-icon>
  } @else {
  <mat-icon>save</mat-icon>
  } Als Entwurf
</button>