标签: angular-material-7

我正在使用角度材料组件开发角度应用程序。在网格中，我有应该支持的内联操作（可以编辑、删除和更多操作）。

目前，当我在网格中嵌入 mat-menu 组件时，项目列表显示非常大尺寸的菜单项。我想自定义菜单项的大小（宽度和高度）。

有没有办法做到这一点。

当前行为：

期待：

另外，我正在寻找下拉菜单，如下面的屏幕截图所示（菜单下拉项以绿色边框突出显示。我们可以注意到，下拉菜单在图标正下方变得干净，并形成一个清晰的框来显示菜单项。）

但是，在默认菜单中，所选下拉菜单没有明显的突出显示或边框。

例如，正如我在下面实现的那样，个人资料图片下方的下拉菜单呈现如下。与上一张截图相比，上一张看起来干净得多。

代码＃

<button mat-icon-button [matMenuTriggerFor]="profileMenu" *ngIf="userIsAuthenticated">
    <!-- <i class="fa fa-user white-icon" aria-hidden="true"></i> -->
    <img class="avatar" src="../../assets/1.jpg">
  </button>

  <mat-menu #profileMenu="matMenu">
    <button mat-menu-item routerLink="/profile"> <i class="fa fa-user" aria-hidden="true"></i> Profile </button>
    <button mat-menu-item (click)="onLogout()"> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout </button>
  </mat-menu>

添加 CSS 类后的变化

::ng-deep .mat-menu-content {
  width: 200px !important; 
  height: 120px !important; 
}

嘿，我正在尝试设置一个 Angular Material SideNav，在进行基本布局设置后，我注意到当 SideNav 打开（未结束）时，右侧有一条白线。当在开发工具中查看它时，它比我设置的宽度小 1 像素。

所以 mat-sidenav 宽度比我在 CSS 中设置的少 1 像素。我将其设置为 240，结果返回为 239，这使得它比预期小 1 像素，并暴露了其下方的白色。请参阅下面的屏幕截图。

我创建了一个 stackblitz 来重现这个问题。

https://stackblitz.com/edit/angular-skcmty?embed=1&file=app/sidenav-overview-example.html

我正在为我的应用程序使用 Angular-Material Autocomplete（版本 7）。我用的是<cdk-virtual-scroll-viewport>里面的 除了我已经解决的许多问题之外，还有一个我不明白的问题：

当我添加 max-height css 时，下拉菜单不会显示，如果我添加高度，它将以固定高度显示。

这是我的代码的一部分：html：

<mat-form-field class="single-select">
  <input matInput #singleInput class="single-input layout flex" type="text" [formControl]="selectControl" [matAutocomplete]="auto" (blur)="onBlur()" (focus)="onFocus()">

  <mat-autocomplete class="single-autocomplete" #auto="matAutocomplete" [displayWith]="displayFn">
    <cdk-virtual-scroll-viewport itemSize="45" minBufferPx="360" maxBufferPx="360" class="virtual-scroll">
      <mat-option *cdkVirtualFor="let option of filteredOptions" [class.selected]="option === oldValue" [value]="option" (click)="onSelect(option)">{{option.label}}</mat-option>
    </cdk-virtual-scroll-viewport>
  </mat-autocomplete>
</mat-form-field>

TS：

export class SingleSelectComponent implements OnInit {
  @Input() value;
  @Input('options')
  set options(value) {
    if (value) {
      this.filteredOptions = value.slice();
      this.data = value;
      this.initValue();
    }
  }
  @Output() formValue = new EventEmitter<any>();

  @ViewChild('singleInput') singleInput;

  selectControl …

<router-outlet></router-outlet>我正在尝试在 Angular Material 弹出对话框中使用。但是，路由器出口部分不会呈现任何内容，也不会将任何内容记录到控制台。

如果我将 添加<router-outlet></router-outlet>到弹出对话框的组件（ContextBuyerPinComponent）的 HTML 内容中，那么它就可以正常工作。

路线如下：

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      { path: 'register-email', component: RegisterEmailComponent },
      {
        path: 'context-buyer-pin',
        component: ContextBuyerPinComponent,
        children: [
          { path: 'services', component: ContextPinServicesComponent },
          { path: 'emails', component: ContextPinEmailsComponent },
          { path: 'details', component: ContextPinDetailsComponent }
        ]
      }
    ]
  }
];

该对话框是通过 ContextBuyerPinComponent 打开的，如下所示 this.matDialog.open(ContextBuyerPinDialogComponent, this.config);：

ContextBuyerPinDialogComponent HTML 如下：

const demoRoutes: Routes = [
  {
    path: 'demo',
    children: [
      { path: 'register-email', …

将材质模块导入 Angular 8 项目的最佳方法是什么？是通过将material.module.ts导入到app主模块然后在其他模块中使用它：

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

还是直接导入各个模块中主要用到的材质模块？

例如，如果我只使用mat-cardin ProductsModule，我只需导入MatCardModule产品模块并完成它。