Angular 6 'mat-button-toggle' 不是已知元素 [英] Angular 6 'mat-button-toggle' is not a known element

问题描述

我已经检查了这些问题:

• 'mat-toolbar' 不是已知元素 -角度 5
• Jhipster/md-button 不是已知元素
• 模板解析错误:'mat-icon'不是已知元素
• Meterial 2 md-datepicker-toggle 不是一个已知元素
• 如何使用 Angular 绑定到模型材料 ?

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

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

之前我使用过 Angular Material，但它不起作用:

<块引用>

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

app.module.ts

import { BrowserModule } from '@angular/platform-b​​rowser';从'@angular/core' 导入 { NgModule };从 './translations' 导入 { TRANSLATION_PROVIDERS };从'./services/translator.service'导入{翻译服务}；从 './app.component' 导入 { AppComponent };导入 { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatRippleModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';从@angular/platform-b​​rowser/animations"导入 { BrowserAnimationsModule };从'@angular/forms'导入{FormsModule}；从'@angular/forms'导入{ReactiveFormsModule}；从'@angular/common/http'导入{HttpClientModule}；@NgModule({进口:[浏览器模块，表单模块，垫按钮模块，MatCheckbox模块，MatFormField 模块，垫输入模块，MatRipple模块，浏览器动画模块，MatDatepicker 模块，],出口:[浏览器模块，表单模块，垫按钮模块，MatCheckbox模块，MatFormField 模块，垫输入模块，MatRipple模块，浏览器动画模块，MatDatepicker 模块，],声明:[AppComponent]，提供者:[TRANSLATION_PROVIDERS, TranslateService],引导程序:[AppComponent]})导出类 AppModule { }

(在这里，即使没有真正的功能，我也只是想添加这些按钮)

....

 
<mat-button-toggle-group name="fontStyle" aria-label="字体样式"><mat-button-toggle value="bold">Bold</mat-button-toggle><mat-button-toggle value="italic">Italic</mat-button-toggle><mat-button-toggle value="下划线">下划线</mat-button-toggle></mat-button-toggle-group>

...

styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';身体 {字体系列:Roboto、Arial、sans-serif；边距:0；}.基本容器{填充:30px；}.版本信息 {字体大小:8pt；浮动:对；}html, body { 高度: 100%;}正文{边距:0；字体系列:'Roboto'，无衬线；}

解决方案

mat-button-toggle 作为 MatButtonToggleModule 所以你也必须导入它.

在您的 AppModule 中添加相同的导入语句:

从'@angular/material/button-toggle'导入{MatButtonToggleModule}；

然后将其添加到 imports 数组中，以便 AppModule 的模板可以理解 mat-button-toggle 是什么.

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

I've checked those questions:

• '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:

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

and previously I've used Angular Material, but for this it just won't work:

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

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

@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 is available as a part of the MatButtonToggleModule So you'll have to import that as well.

Add an import statement for the same in your AppModule:

import {MatButtonToggleModule} from '@angular/material/button-toggle';

And then add it to the imports array as well so that AppModule's templates can understand what mat-button-toggle is.

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屋！