标签: angular-material2

我有一个组件,用于Angular Material MdDialog:

@Component({
  ...
})
export class MyComponent {

  constructor(@Inject(MD_DIALOG_DATA) public data: any, public dialogRef: 
MdDialogRef<MyComponent>) {
...
  }


}

我试图用Jasmine进行单元测试:

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        SharedTestingModule,
      ],
      declarations: [
        MyComponent,
      ],
    })
    .compileComponents();
  }));

  ...

});

不幸的是,我收到以下错误:

错误:没有InjectionToken MdDialogData的提供程序!

SharedTestingModule导入和导出我的自定义Angular Material模块,该模块本身导入并导出MdDialogModule.

我怎样才能摆脱这个错误？

非常感谢你!

Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3

我想在我的angular 4项目中使用https://materialdesignicons.com/中的图标.网站上的说明仅涵盖如何将其包含在Angular 1.x(https://materialdesignicons.com/getting-started)中

如何包含材料设计图标,以便我可以像<md-icon svgIcon="source"></md-icon>使用Angular Material和ng serve？一样使用它们？

注意:我已经包含了google material icons哪些是不同的!

我有这个,我会假设工作,但不是:

<mat-icon color="white">home</mat-icon>

然后,我也有:

<button mat-raised-button color="accent" type="submit"
 [disabled]="!recipientForm.form.valid">
    <mat-icon color="white">save</mat-icon>SAVE
</button>

此代码段由于某种原因确实有效(将图标显示为白色).

如何获得独行mat-icon以显示为白色使用的color属性？(我可以很容易地添加一个白班,但我想了解这一点)

我在同一组件中有2个材料2个表,并进行排序.我找不到将MatSort指令分配给自己的表的方法.我只能在第一个表上使用MatSort,而第二个表不能识别它上面有MatSort.有谁知道如何配置两个表在同一组件中排序？

我尝试使用不同的名称定义ViewChild,但它不起作用.

@ViewChild('hBSort') hBSort: MatSort;
@ViewChild('sBSort') sBSort: MatSort;


this.hBSource = new HBDataSource(this.hBDatabase, this.hBPaginator, 
this.hBSort);
this.sBSource = new SBDataSource(this.sBDatabase, this.sBPaginator, 
this.sBSort);

Table 1
const displayDataChanges = [
   this.hBPaginator.page,
   this.hBSort.sortChange,
   this._filterChange
];

Table 2
const displayDataChanges = [
   this.sBPaginator.page,
   this.sBSort.sortChange,
   this._filterChange
];

Table 1
<mat-table #hBtable [dataSource]="hBSource" matSort style="min-width: 
740px;">
    <ng-container matColumnDef="domain">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.domain' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="general">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{'list.general' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.general.gNum}} ({{row.general.gPct | number: '1.1-2'}}%) …

我正在使用Angular with Material

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>

我正在尝试添加一个图标到按钮,但我无法弄清楚如何做到这一点,并找不到这方面的文档.

https://material.angular.io/components/button/api

看文件,有这样的:

该按钮具有以下html:

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
    <img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
    <span _ngcontent-c1="">Material</span>
  </span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>

这是正确的方法吗？

我正在使用角度材料-2的对话框.

问题是:在iPhone或平板电脑中打开模态对话框时,我无法禁用自动对焦.在iOS中,它会自动将第一个输入字段聚焦在对话框中!

我尝试使用tab索引,并在其他输入字段中使用自动焦点,但它不起作用

我正在使用Angular 2作为我的代码,在我的对话框中我正在使用表单控件.我试过用markasuntouched afterviewInit,但我还是有同样的问题!!

有没有可能改变mat-spinner或大小的方法mat-progress-circle？

我读的文档mat-spinner和mat-progress-circle,但他们表示,mat-diameter中断和微调将父元素的大小.

如何mat-spinner在mat-button不改变按钮高度的情况下放入左角？

<button mat-button>
   <mat-spinner style="float:left;"></mat-spinner> 
   processing....
</button>

我也尝试使用内联css来改变高度

style="float:left;height:10px;width:10px;

但是看起来并不好看.

我已经在使用材质表单的对话框中创建了一个表单,但我似乎无法获得大于180px的输入,尽管有许多示例,包括https://material.angular.io/components/input/example.

我确定这是一个非常标准的css的东西,但我没有那种大脑,所以我无法弄清楚问题.

有没有人有一个严肃/非平凡的例子？

这是我的:

<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
  <form novalidate #f="ngForm" class="form-full-width">
    <mat-form-field class="input-full-width">
      <input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
      <mat-hint>Enter a unique name.</mat-hint>
    </mat-form-field>
    <mat-form-field class="input-full-width">
      <textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
      <mat-hint>You should describe the purpose/use of this thing.</mat-hint>
    </mat-form-field>
  </form>
</mat-dialog-content>

CSS:

.form-full-width {
    min-width: 150px;
    max-width: 500px;
    width:100%;
}

.input-full-width {
    width:800px;
}

.mat-form-field.mat-form-field {
    width: auto;
}

谢谢

我正在尝试使用角度材料2创建一个导航栏,它在移动设备和平板电脑等小屏幕中折叠.我只能找到md-button而不是md-menu-bar,就像在角度材料中一样

我刚刚复制并粘贴了datePicker和输入的角度材料代码,但是我收到了datePicker的这个错误.

app.module

import {MaterialModule} from '@angular/material';
@NgModule({
imports: [
...
MaterialModule
]

<md-input-container>
    <input mdInput placeholder="Rechercher" [(ngModel)]="filterHistorique">
</md-input-container>

<md-input-container>
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
    <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

这是我在浏览器中出现的错误:

无法绑定到'mdDatepicker',因为它不是'input'的已知属性如果'md-datepicker'是Angular组件,则验证它是否是此模块的一部分.2.如果'md-datepicker'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[错误 - >]

错误是针对datepicker,当我删除它时,错误消失