标签: angular-material

我遇到过这样的情况，即在嵌套了几层深的容器边缘有单选按钮，并带有自动溢出。Angular 材质单选按钮具有波纹效果，会被剪裁。我没有重新处理整个事情，而是打算使用 disableRipple 关闭涟漪。这适用于点击，但在组件之间切换时似乎不起作用，如本stackblitz所示，如下面的屏幕截图所示，我切换到选项 1 而不是单击顶部的选项 1。我尝试更新 css 以显示：none，但是当焦点改变时根本没有视觉提示。在我看来，涟漪效应应该叠加以避免剪切问题，但这不是它的工作原理。那么有没有办法同时关闭标签和点击呢？

我正在使用 mat-drawer 并且我想在关联的组件中收到通知，当打开和关闭 mat-drawer 以添加一些逻辑时；

html 具有以下结构：

<mat-drawer-container class="example-container"  autosize>
<mat-drawer #drawer class="custom-sidenav" mode="side">
    <div>
  <button routerLink="/" routerLinkActive="active"
   style="margin-top: 50px" mat-button class="small" (click)="showFiller = !showFiller" >
    <mat-icon style="color: red">home</mat-icon>
  <b style="margin-left: 20px">Home</b>
  </button>
</div>
  <div>
  <button routerLink="/transactions" routerLinkActive="active" style="margin-top: 20px" mat-button class="small" (click)="showFiller = !showFiller" >
    <mat-icon style="color:gray">trending_flat</mat-icon>
  <b matBadge="{{totalTransactions}}" matBadgeColor="red" matBadgeOverlap="false" style="margin-left: 20px">Transactions</b>
  </button>
</div>
  <div *ngIf="isAdmin">
        <button routerLink="/fetch-data" routerLinkActive="active" style="margin-top: 20px" mat-button class="small" (click)="showFiller = !showFiller" >
            <mat-icon  matBadge="{{totalCertificates}}" matBadgePosition="before" matBadgeColor="accent"  style="color:gray">description</mat-icon>
          <b style="margin-left: 20px">Certificates</b>
          </button>
  </div>
  <div> …

我从 MySQL 数据库获取用户列表以<mat-table>使用dataSource属性显示它：

以下是 typescript 方法getUnitData()，我将 dataSource 值设置为从 PHP 脚本返回的 JSON 数组：

export class RegistrationComponent implements OnInit {
  dataSource: MatTableDataSource<units>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  constructor(private auth: AuthApiService) { }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string){
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if(this.dataSource.paginator)
    {
      this.dataSource.paginator.firstPage();
    }
  }

  getUnitData(){
    this.auth.getUnitDataService().subscribe(
      (data)=>
      {
        this.dataSource = new MatTableDataSource(data);
      },
      (error)=>
      {

      }
    )
  }

}

这是来自的主要方法AuthApiService：

getUnitDataService(){
    if(this.checkIsLogin){
      this.headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

      return …

我将 Angular v5 与 Angular Material 一起使用。我有一个mat-select我想在选择一个选项后保持打开状态，因为我想通过单击特定按钮显式触发关闭。我试图把(click)="$event.stopPropagation()在mat-option标签，但并没有工作。有任何想法吗？？

我在这里创建了一个简单的例子： stackblitz demo

我想知道是否可以更改类型编号的材料输入的增量范围，默认为1，但是如果我想将其更改为10,000呢？可行吗？

我正在寻找一种方法来执行以下操作：要显示通知，我想实现一个自定义 SnackBar。我按照官方文档（这里）创建了一个简单的 Snackbar，带有一些自定义配置。

this.snackBar.open('Message one', 'OK', configSuccess);

export const configSuccess: MatSnackBarConfig = {
  panelClass: 'style-success',
  duration: 10000,
  horizontalPosition: 'left',
  verticalPosition: 'bottom'
};

这工作正常，但我想在我的 SnackBar 中显示不同的显示（特别是发送数据并显示两个按钮）。按照文档，我创建了一个组件并从中打开我的 SnackBar：

/*...*/    
this.snackBar.openFromComponent(SnackbarMessageComponent, {
              data: 'Message one',
            });
/*...*/

@Component({
  selector: 'app-snackbar-message',
  templateUrl: './snackbar-message.component.html',
  styleUrls: ['./snackbar-message.component.scss']
})
export class SnackbarMessageComponent implements OnInit {

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }

  ngOnInit() {
  }

一切正常，但现在我遇到了问题。我想将我之前定义的配置（config Success例如）传递给这个新的 SnackBar ，但是在官方文档和 Google 中我没有找到任何东西。

有没有办法做到这一点而不必全局定义它？有人可以指导我或告诉我去哪里吗？提前致谢！

我想知道如何实现它。我已经找到

在这里我找到了它应该如何完成，通过修改组件，而不是扩展它，但我真的无法在代码中找到如何做到这一点。更多信息会很棒。如何扩展或修改 mat-calendar 的模板？在 mat-calendar 代码中，我找不到模板。

在第二种情况下，我找到了如何在此处添加按钮2但我遇到了同样的问题，不知道该怎么做，有人可以提供任何示例，我可以在其中了解如何实现它。

我试图将我的分页放在页面的底部中心。I'，使用角材料垫分页器。

这是现在的结果：

1：

2：

正如你所看到的，分页器现在在我的垫子手风琴上方，它不会随着页面的流动而下降，它在左侧而不是中心。

这是我的代码：html：

<mat-spinner *ngIf="isLoading"></mat-spinner>
<mat-accordion multi="true" *ngIf="posts.length > 0 && !isLoading">
  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>
      {{ post.title }}
    </mat-expansion-panel-header>
    <p>{{ post.content }}</p>
    <div class="post-image">
      <img [src]="post.imagePath" [alt]="post.title">
    </div>
    <mat-action-row>
      <a mat-button color="primary" (click)="onEdit(post.id)">EDIT</a>
      <button mat-button color="warn" (click)="onDelete(post.id)">DELETE</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>
<div class="mat-page">
  <mat-paginator [length]="totalPosts" [pageSize]="PostsPerPage" [pageSizeOptions]="pageSizeOptions" (page)="onChangePage($event)"
    *ngIf="posts.length > 0 "></mat-paginator>
</div>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0 && !isLoading">No posts added yet!</p>

css：

:host {
  display: block;
  margin-top: 1rem;
}

.info-text {
  text-align: …

我正在使用<mat-nav-list>组件来显示导航栏，并像这样header(i,e mat-toolbar) 显示点击list-items(ex Home 1)：

• 现在我想list -item(ex Home 2)在标题上显示选定的/单击的。
• 表示点击Home 2，Home 2应显示在header.

闪电战链接

我在 mat-step 的模板中添加了一个 mat-input，以便用户可以添加标题。

<mat-horizontal-stepper>
    <mat-step *ngFor="let group of apprGrpList; let i = index"
        [label]="group.group_Name | capitalize"  
        [editable]="isEditable" >
        <ng-template matStepLabel>
                <mat-form-field class="sf-form-width">
                        <input class="sf-form-input"
                            matInput #title maxlength="30"
                            placeholder="Aprroval Step Title"
                            autocomplete="off">
                        <mat-hint *ngIf="title.value" 
                            align="end">{{title.value.length}} / 30</mat-hint>
                        <button mat-button *ngIf="title.value" 
                            matSuffix mat-icon-button aria-label="Clear" 
                            (click)="title.value=''">
                            <mat-icon>close</mat-icon>
                        </button>
                        <button mat-button *ngIf="title.value" 
                            matSuffix mat-icon-button aria-label="Set" 
                            (click)="setTitle(group.sequence, title.value)">
                            <mat-icon>check</mat-icon>
                        </button>                            
                </mat-form-field>  
        </ng-template>
...

下面是我所取得的成就的示例捕获。

一切正常，直到在 mat-input 中输入单词不接受空格输入（空格键按键）。

任何建议如何在 mat-steps 内的 mat-input 中允许空格键？

我在文档中看到过这个，有没有办法绕过 SPACE 事件默认值？

键盘交互

• LEFT_ARROW：聚焦上一步标题
• RIGHT_ARROW：聚焦下一步标题
• ENTER、SPACE：选择当前焦点所在的步骤
• TAB：聚焦下一个可选项卡元素
• TAB+SHIFT：聚焦上一个可选项卡元素

https://material.angular.io/components/stepper/overview

https://stackblitz.com/edit/angular-9hm4bv