问题描述
限时送ChatGPT账号..我已经检查了这些问题:
'mat-toolbar' 不是已知元素 -角度 5Jhipster/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-browser';从'@angular/core' 导入 { NgModule };从 './translations' 导入 { TRANSLATION_PROVIDERS };从'./services/translator.service'导入{翻译服务};从 './appponent' 导入 { AppComponent };导入 { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatRippleModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';从@angular/platform-browser/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/overviewand 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 './appponent';
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屋!
更多推荐
[db:关键词]
发布评论