Angular 6“mat-button-toggle”不是已知元素

我已经检查过这些问题：

• “mat-toolbar”不是已知元素 - Angular 5
• Jhipster / md-button 不是已知元素
• 模板解析错误：“mat-icon”不是已知元素
• 材质 2 md-datepicker-toggle 不是已知元素
• 如何使用 Angular Material 绑定到模型？

我已经按照本教程进行操作：

• https://material.angular.io/components/button-toggle/overview

之前我使用过 Angular Material，但对于这个它不起作用：

compiler.js:1016 未捕获错误：模板解析错误： “mat-button-toggle”不是已知元素： 1. 如果“mat-button-toggle”是 Angular 组件，则验证它是否是该模块的一部分。

应用程序模块.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 is.

另外，我不太确定为什么您从 AppModule 中导出这些模块。如果我们计划将某个模块导入到其他模块中，我们通常会从该模块中导出任何内容。但由于这是 AppModule，因此也是您的 RootModule，我认为您不会将其导入到任何其他模块中。但情况可能并非如此。