Angular 6的"mat-button-toggle"不是一个已知元素 [英] Angular 6 'mat-button-toggle' is not a known element
问题描述
我已经检查了以下问题:
I've checked those questions:
- "mat-toolbar"不是已知元素-角度5
- Jhipster/md-button不是已知元素
- 模板解析错误:"mat-icon"不是已知元素
- 物料2 md-datepicker-toggle不是已知元素
- 如何使用Angular绑定到模型材质< mat-button-toggle> ;?
- 'mat-toolbar' is not a known element - Angular 5
- Jhipster / md-button is not a known element
- Template parse errors: 'mat-icon' is not a known element
- Meterial 2 md-datepicker-toggle is not a known element
- How to bind to model with Angular Material <mat-button-toggle>?
并且我已经遵循了本教程:
and I've followed this tutorial:
并且以前我使用过Angular Material，但是对于它来说它是行不通的:
and previously I've used Angular Material, but for this it just won't work:
compiler.js:1016未捕获的错误:模板解析错误: "mat-button-toggle"不是已知元素: 1.如果"mat-button-toggle"是Angular组件，则请验证它是否属于此模块.
compiler.js:1016 Uncaught Error: Template parse errors: 'mat-button-toggle' is not a known element: 1. If 'mat-button-toggle' is an Angular component, then verify that it is part of this module.
app.module.ts
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 { }
(这里我只是试图添加这些按钮，即使没有真正的功能)
(here I am just trying to add those buttons even without real functionality)
....
<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>
...
styles.css
styles.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 因此，您也必须将其导入.
mat-button-toggle is available as a part of the MatButtonToggleModule So you'll have to import that as well.
在您的AppModule中添加相同的导入语句:
Add an import statement for the same in your AppModule:
import {MatButtonToggleModule} from '@angular/material/button-toggle';
，然后将其也添加到imports数组中，以便AppModule的模板可以了解mat-button-toggle是什么.
And then add it to the imports array as well so that AppModule's templates can understand what mat-button-toggle is.
此外，我不太确定为什么要从AppModule中导出这些模块.如果计划在其他模块中导入该模块，则通常会从该模块导出任何内容.但是由于这是AppModule，因此是RootModule，所以我认为您不会在其他任何模块中导入它.情况可能并非如此.
Also, I'm not really sure why you've exported these modules from your AppModule. We generally export anything from a module if we are planning on importing that module in some other module. But since this is the AppModule, and thus your RootModule, I don't think you'll be importing it in any other module. That might not be the case though.
这篇关于Angular 6的"mat-button-toggle"不是一个已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
