标签: angular-material2

目前我有MyAngularModule类似的：

/app/material/material.module.ts

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

const MaterialComponents = [
  MatButtonModule,
  MatIconModule,
...
];

@NgModule({
  imports: [
    MaterialComponents
  ],
  exports: [
    MaterialComponents
  ],
})
export class MyMaterialModule {

}

现在导入一次AppModule。

目前我有一个“扁平”模块架构，全部都急切地加载。

现在我正在更改应用程序架构以具有核心、共享和功能模块（使用延迟加载loadChildren）。

例如。

/features/data-grid/data-grid.module.ts

该模块将使用一些 Angular Material 组件（例如 SpinnerModule），但不是全部。

其他功能模块将使用其他一些 Material 组件。
某些组件显然会在许多功能模块中使用。

问题是：如何在功能模块中加载所需的材质组件？应该MyMaterialModule是模块的子模块吗shared？

对于学校作业，我们需要使用有角度的材料。我制作了一个自定义主题，名为：weather-theme.scss

该文件中的代码如下：

@import '~@angular/material/theming';\n\n@include mat-core();\n\n// Define the palettes for your theme using the Material Design palettes available in palette.scss\n// (imported above). For each palette, you can optionally specify a default, lighter, and darker\n// hue. Available color palettes: https://material.io/design/color/\n$weather-theme-primary: mat-palette($mat-gray, 800, 700, 600);\n$weather-theme-accent: mat-palette($mat-amber, 800, 700);\n\n// The warn palette is optional (defaults to red).\n$weather-theme-warn: mat-palette($mat-red);\n\n// Create the theme object (a Sass map containing all of the palettes).\n$weather-theme-theme: mat-light-theme(\n    $weather-theme-primary,\n    $weather-theme-accent,\n    $weather-theme-warn\n);\n\n// Include theme styles for core and each …

<mat-slide-toggle>Slide Me!</mat-slide-toggle>

如何增加切换拇指图标的长度，是否可以将切换拇指图标自定义到栏的末尾？

我在芯片列表上显示 mat-error 时遇到了一些问题。根据这个 GitHub问题errorState明确设置以显示 mat-error。

此解决方案工作正常，但仅当芯片列表具有焦点时才有效。当芯片列表未聚焦时，它不起作用。看这个例子。就我而言，当芯片列表没有焦点时，由于某些 API 调用，有效水果列表稍后会发生变化。

当芯片列表没有焦点时，如何显示 mat-error？

我一直试图从angular2的角度材料中调整或创建一个类似的选择类型,任何基于的想法？

先感谢您.

该对话框在Firefox中正常工作.在Chrome中,click事件只显示一个没有内容或按钮的小空对话框.当我遇到这个问题时,我正在研究这个例子.

DialogComponent:

@Component({
selector: 'dialog',
template: `
        <h1 md-dialog-title class="primary-color">hey title</h1>
        <md-dialog-content class="accent-color">
          hey this is the content of the dialog
        </md-dialog-content>
        <md-dialog-actions>
          <button md-raised-button color="primary" md-dialog-close>
            close button
          </button>  
        </md-dialog-actions>
`
})

AppComponent html:

<div>
  <button md-raised-button color="primary" (click)="openDialog()">
    Example Dialog - Click Me!
  </button>
</div>

AppComponent功能:

constructor(public dialog: MdDialog) {}

openDialog() {
  this.dialog.open(DialogComponent);}

我是否需要做些具体的工作才能使其在Google Chrome浏览器中运行？

我正在按照示例尝试使用材料2 datepicker ， 但我一直收到此错误

Error: Attempted to open an MdDatepicker with no associated input.
at MdDatepicker.open (material.es5.js:21344)

下面是我的实现

<md-input-container>
                                        <input mdInput 
                                               name="dobdate" 
                                               (selectedChanged)="onSelectDOBDate($event)" 
                                               [(ngModel)]="admissionModel.DOB" 
                                               [mdDatepicker]="picker" 
                                               placeholder="Choose a Date of Birth">
                                        <button mdSuffix [mdDatepickerToggle]="dobpicker"></button>
                                    </md-input-container>
                                    <md-datepicker #dobpicker></md-datepicker>

login.component.ts

import { Component, OnInit,ViewChild , Inject} from '@angular/core';
import { Login }    from './login';
import {MatPaginator, MatSort, MatTableDataSource, MatDialog,MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'app-login',
  templateUrl: 'dialog-overview-example-dialog.html',
}) …

我需要查看Angular Material的默认图标列表 https://material.angular.io/components/icon/overview

我没有使用Font Awesome和Google Fonts

我可以在Angular Material 2中设置底片的宽度(固定或百分比)吗？

非常感谢