我正在使用Angular CLI和角度材料v.5.2.5并尝试使用
垫图标按钮
但是控制台产生了这样的错误:
未捕获错误:模板解析错误:'mat-icon'不是已知元素...
如果我使用
垫募集按钮
一切正常,无法弄清楚如何解决这个问题
的index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Todo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from …我创建了一个新项目,我正在尝试添加angular-material.
我material.module.ts在我的app文件夹中创建:
import { NgModule } from '@angular/core';
import {
MatButtonModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
MatToolbarModule
} from '@angular/material';
@NgModule({
imports: [
MatButtonModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
MatToolbarModule,
],
exports: [
MatButtonModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatFormFieldModule,
MatInputModule,
MatTooltipModule,
MatToolbarModule
]
})
export class MaterialModule { }
我已将其导入我的一个组件中:
import { MaterialModule } from '../material.module';
此外,我已经设置了角度材料 index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
在我的 style.css
@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
我知道这是有效的,因为我已经展示了material-icon一个测试:
<i class="material-icons">face</i> …看看这个Plunker:https://plnkr.co/edit/yu95hUrKlUh4Ttc5SwYD ？ p = preview
当我使用时<mat-slide-toggle>,我能够修改组件中的值:
<mat-slide-toggle [(ngModel)]="myFlagForSlideToggle">Toggle me!</mat-slide-toggle>
myFlagForSlideToggle 按预期更新.
但是当我使用时<mat-button-toggle>,值不会更新.我不得不补充ngDefaultControl甚至让这个例子工作,但我不确定它是如何重要的.
<mat-button-toggle [(ngModel)]="myFlagForButtonToggle" ngDefaultControl>Toggle me!</mat-button-toggle>
将按钮状态绑定到组件的正确方法是什么？
您好我正在使用JHipster 4.0.1
我想将angular 2材料集成到我的home.component中.
我做了:npm install material npm install angular2/{core,button}
<html><head></head>
<body>
<md-button>Hello </md-button></body></html>
错误是:md-button不是已知元素
我目前正在开发旧版 Angular 5 代码，除了使用 Angular CLI 生成组件时的默认测试之外，该代码没有任何单元测试。
\n\n该项目正在使用 Angular Material 5 RC0，单元测试似乎没有考虑我的模块的依赖关系。
\n\n应用程序模块.ts：
\n\n@NgModule({\n declarations: [\n AppComponent,\n /* My module components... */\n ],\n imports: [\n BrowserModule,\n FormsModule,\n HttpModule,\n ReactiveFormsModule,\n BrowserAnimationsModule,\n routing,\n DialogsModule,\n SharedModule ,\n MaterialModule,\n MatListModule, // It\'s the module that should be needed\n MatSidenavModule,\n ToastrModule.forRoot({\n timeOut: 5000,\n positionClass: \'toast-bottom-right\',\n preventDuplicates: true\n }),\n HttpClientModule,\n TableFactoryModule\n ],\n providers: [\n /* My module services */,\n AuthGuard\n ],\n bootstrap: [AppComponent]\n\n})\nexport class AppModule {\n\n}\n应用程序组件.ts：
\n\nimport { Component, Input, …