标签: angular-material

角5 -

这是npm模块(package.json) -

   "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0-rc.2",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.2",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"

我使用Angular材质Spinner作为Material模块的MatSpinner指令

import { MatSpinner } from "@angular/material";
@NgModule({
imports: [

MatSpinner
],
declarations: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

这是HTML:

<mat-spinner></mat-spinner>

我得到一个错误 -

由模块'AppModule'导入的意外指令'MatSpinner'.请添加@NgModule注释.

我的Angular材料项目中有一个简单的选择表单字段:

component.html

  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="Mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>

当[(value)]="modeSelect"被绑定到modeSelect财产在component.ts文件

我想这样做,所以<mat-option value="domain">Domain</mat-option>在页面加载时默认选择.

ng-selected 不适合我

嗯,大约一个星期我正在尝试使用Angular Material运行应用程序.
在使用Angular Material及其神经破坏虫之后面临如此巨大的挑战(由于它们的角色V2尽快释放V2的里程碑可能永远无法解决),现在它让我大吃一惊,为什么我必须使用616KB JS+CSSAngular Material模块代替的254KB JS+CSSMaterializecss.
据我所知(告诉我,如果我错了!):

最好尽量避免更改DOM元素

但Angular材料基础是导致大量回流/重新涂饰的指令,实际上基于我看到的演示,Materialisecss比Angular Material更快更轻.
这显然是Angular Material更具角度友好性,并且具有一些特殊功能,例如$mdThemingProvider......,但我对使用Angular Material或其性能表示怀疑.
有什么话要让我再次相信Angular Material？
是否值得使用Angular Material而不是纯Angular + Materialisecss？
因为我看不出它们的结果有什么重大变化？

如何在角材料表中使行可扩展？一个要求是我需要使用角度材料表.我也更喜欢将材料手风琴用于此处提供的信息.

我想点击行并显示每列的不同信息.我正在寻找类似下面的东西.如果单击第1行,则第2行和第3行将显示不同的数据.

我不能像文档中描述的那样注入MatDialogRef:https://material.angular.io/components/dialog/overview

当我试图这样做时,我有错误:

错误错误:StaticInjectorError [MatDialogRef]:StaticInjectorError [MatDialogRef]:NullInjectorError:没有MatDialogRef的提供程序!

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import {
	MatInputModule,
	MatDialogModule,
	MatProgressSpinnerModule,
	MatButtonModule,
	MatDialog,
	MatDialogRef
} from '@angular/material';

import { ApiModule } from '../api/api.module';
import { RoutingModule } from '../routing/routing.module';

import { RegistrationComponent } from './components/registration.component';
import { LoginComponent } from './components/login.component';

import { AccountService } from './services/account.service';

@NgModule({
	imports: [
		BrowserModule,
		MatInputModule,
		MatDialogModule,
		MatProgressSpinnerModule,
		MatButtonModule,
		FormsModule,
		RoutingModule,
		ApiModule
	],
	declarations: …

如何在切换组中设置默认选择的最后一个按钮.
这是我的代码.

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle value="Heritage">
        <span>Heritage</span>
    </mat-button-toggle>
    <mat-button-toggle value="Nature">
        <span>Nature</span>
    </mat-button-toggle>
    <mat-button-toggle value="People">
        <span>People</span>
    </mat-button-toggle>
    <mat-button-toggle value="All">
        <span>All</span>
    </mat-button-toggle>
</mat-button-toggle-group>

我正在尝试实现我的md-tabs每一个md-tab都是使用角度材料的独立状态.我目前的标记看起来像这样:

  md-tabs.is-flex.auto-flex(selected="selectedIndex",layout="vertical")
     md-tab(on-select="selectTab(0)",label="Player",ui-sref="state1")
        div.tab(ui-view)

     md-tab(on-select="selectTab(1)",label="Map",ui-sref="state2")
        div.tab(ui-view)

不过,我不认为这是ui-router的有效标记.是否可以使用当前版本的angular-material和ui-router进行此操作？

我想尝试使用angular-cli(https://github.com/angular/angular-cli)创建一个Angular 2应用程序,然后使用ng2-material(https://github.com/justindujardin/ng2-material)用于UI组件.但我只是不明白我必须包含ng2-material库以便使用它.

我创建了一个项目,ng new myproject然后我启动了服务器ng serve并打开了网页,结果很好.下一步,我安装了ng2-material npm install ng2-material --save.然后我添加MATERIAL_PROVIDERS到angular的bootstrap,如下所示https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts.

这导致GET http://localhost:4200/ng2-material/all 404 (Not Found)Web浏览器中出现错误消息,我无法弄清楚如何摆脱它.

angular-cli似乎正在做一些事情来创建一个文件dist夹,其中index.html中使用的一些节点模块最终进入,但我看不到在哪里或如何配置.

Angular2材料团队最近发布了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

我想改变angular2材质对话框的外观和感觉.例如,要更改弹出容器的固定大小并使其可滚动,请更改背景颜色,以此类推.最好的方法是什么？有没有我可以玩的CSS？

我创建了一个简单的 Angular 9 项目，其中只有几个简单的组件。我使用以下方法添加了角材料：

ng add @angular/material

完成后，我运行npm start并注意到它开始使用一堆我不在我的应用程序中使用的@angular/material/* 组件编译整个@angular：

Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling @angular/cdk/portal …