angular - Angular 6 'mat-button-toggle' 不是已知元素
问题描述
我检查了这些问题:
- 'mat-toolbar' 不是已知元素 - Angular 5
- Jhipster / md-button 不是已知元素
- 模板解析错误:“mat-icon”不是已知元素
- Meterial 2 md-datepicker-toggle 不是已知元素
- 如何使用 Angular Material <mat-button-toggle> 绑定到模型?
我已经按照本教程进行操作:
以前我使用过 Angular Material,但为此它不起作用:
compiler.js:1016 未捕获错误:模板解析错误:'mat-button-toggle' 不是已知元素:1. 如果 'mat-button-toggle' 是 Angular 组件,则验证它是否是此模块的一部分。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TRANSLATION_PROVIDERS } from './translations';
import { TranslateService } from './services/translator.service';
import { AppComponent } from './app.component';
import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatRippleModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
FormsModule,
MatButtonModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatRippleModule,
BrowserAnimationsModule,
MatDatepickerModule,
],
exports: [
BrowserModule,
FormsModule,
MatButtonModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatRippleModule,
BrowserAnimationsModule,
MatDatepickerModule,
],
declarations: [AppComponent],
providers: [TRANSLATION_PROVIDERS, TranslateService],
bootstrap: [AppComponent]
})
export class AppModule { }
(在这里我只是想添加这些按钮,即使没有真正的功能)
……
<div>
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
</div>
...
样式.css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body {
font-family: Roboto, Arial, sans-serif;
margin: 0;
}
.basic-container {
padding: 30px;
}
.version-info {
font-size: 8pt;
float: right;
}
html, body { height: 100%; }
body { margin: 0; font-family: 'Roboto', sans-serif; }
解决方案
mat-button-toggle
可作为 的一部分MatButtonToggleModule
所以你也必须导入它。
在您的 AppModule 中添加相同的导入语句:
import {MatButtonToggleModule} from '@angular/material/button-toggle';
然后将它也添加到imports
数组中,以便 AppModule 的模板可以理解它是什么mat-button-toggle
。
另外,我不确定您为什么要从 AppModule 中导出这些模块。如果我们计划在其他模块中导入该模块,我们通常会从模块中导出任何内容。但由于这是 AppModule,因此是您的 RootModule,我认为您不会将其导入任何其他模块。但情况可能并非如此。
推荐阅读
- python-3.x - 无法使用 tf.metrics.recall
- jenkins - 如何在另一个作业成功完成后自动运行作业?
- python - 无法从 Python 脚本中的 HDFS 访问目录
- windows - IMFSourceReader::GetNativeMediaType 是否等同于 IMFMediaTypeHandler::GetMediaTypeByIndex?
- java - 如何使用同步线程将数据插入我的数据库表
- pandas - 如何在未定义的其他列上应用定义的函数
- javascript - 使用 IFrame 在 jQuery 中传播事件
- php - 如何使用 PHPMailer 将远程文件附加到电子邮件
- html - Discord 播放不允许嵌入的嵌入视频,如何?
- php - 被邀请者在邀请者租户中:Azure AD 邀请终结点错误