如何将角度材质扩展面板箭头图标放置在左侧

从角度材料8.1开始。x、 您可以使用 @Input() togglePosition -装饰师。

The documentation states the following

@Input()togglePosition:MatAccordionTogglePosition |扩展指示器的位置。

将其添加到手风琴中,如下所示: <mat-accordion [togglePosition]="'before'">

这是一个 Stackblitz with an example

首先,你们需要在应用程序中导入棱角材料图标和扩展面板模块。单元ts文件,

import {MatExpansionModule,MatIconModule} from '@angular/material';
...
@NgModule({
  ...
  imports: [
    MatExpansionModule,
    MatIconModule 
  ]
  ...
})
export class AppModule { }

在HTML文件中添加此代码,

    <mat-expansion-panel expanded='true' hideToggle="true" (click)="click()">
      <mat-expansion-panel-header [ngClass]="tickets-container-header">
        <mat-panel-title>
            <mat-icon>{{icon  ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</mat-icon>
            <div  class="col-md-9">
            {{header}} 
            </div>
        </mat-panel-title>

      </mat-expansion-panel-header>
    </mat-expansion-panel>

将此代码添加到组件文件中,

icon: boolean = false;

click(){
    this.icon = !this.icon;
  }

谢谢

仅使用css对我有效:

.mat-expansion-indicator {
    position: absolute;
    left: 15px;
  }

不需要添加函数和变量。只需添加此样式:

.mat-expansion-panel-header > span.mat-content {
    order: 2;    
}

只需在面板标题上添加类“mat expansion toggle indicator before”。例子:

<mat-expansion-panel>
<mat-expansion-panel-header class="mat-expansion-toggle-indicator-before">
    <mat-panel-title>
        A title!
    </mat-panel-title>
</mat-expansion-panel-header>

您可以使用 togglePosition 属性将切换箭头的位置设置为标题之前。

<mat-expansion-panel expanded='true' togglePosition="before">
   <mat-expansion-panel-header [ngClass]="tickets-container-header">
      <mat-panel-title>
         <div class="col-md-9">
            {{header}} 
         </div>
      </mat-panel-title>
   </mat-expansion-panel-header>
</mat-expansion-panel>

它可以在文档的API部分中找到。 https://material.angular.io/components/expansion/api#MatAccordionTogglePosition

我发现了一些有趣的事情。 这个mat内容在整个屏幕上传播。 所以如果你想 既不在右边也不在左边 但相反,只是 就在你的“文本”旁边 从mat内容来看

:host {
  ::ng-deep span.mat-content {
    flex: none;
  }
}

将flex设置为none。

然后,mat内容的宽度与使用空间的跨度相同,mat指示器图标就在其旁边。

使用角度装饰符“@indicatorRotate”

   <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
     expand_more
  </mat-icon>