我正在使用 Angular Material 将 Date Picker 添加到我的应用程序中。由于某种原因,角度材料没有应用原始的角度材料样式。
它如何在我的应用程序中显示:
它应该如何显示:
我做了什么:
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
// Added this to the Angular Module whose components require the date picker
import {MatNativeDateModule, MatDatepickerModule} from "@angular/material";
//Added this in the root style.css file for the entire app
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
我不确定我做错了什么。
更新:
模块代码:
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from "@angular/router";
import {ProposalListComponent} from './components/proposal-list.component';
import {ProposalDetailComponent} from './components/proposal-detail.component';
import {ProposalEditComponent} from './components/proposal-edit.component';
import {ReactiveFormsModule} from "@angular/forms";
import {ProposalEditResolverService} from "./services/proposal-edit-resolver.service";
import {SectorResolverService} from "../root/services/sector-resolver.service";
import {ProposalAddComponent} from './components/proposal-add.component';
import {AuthGuard} from "../authentication/guards/auth.guard";
import {MatNativeDateModule, MatDatepickerModule, MatFormFieldModule, MatInputModule} from "@angular/material";
import {FileDropModule} from "ngx-file-drop";
import {ProposalListResolverService} from "./services/proposal-list-resolver.service";
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{
path: 'proposals',
component: ProposalListComponent,
canActivate: [AuthGuard],
resolve: {proposals: ProposalListResolverService}
},
{
path: 'proposals/:id',
component: ProposalEditComponent,
canActivate: [AuthGuard],
resolve: {proposal: ProposalEditResolverService, sector: SectorResolverService}
},
{
path: 'proposals/0/new',
component: ProposalAddComponent,
canActivate: [AuthGuard],
resolve: {sector: SectorResolverService}
}
]),
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
FileDropModule
],
declarations: [ProposalListComponent, ProposalDetailComponent, ProposalEditComponent, ProposalAddComponent],
providers: [ProposalEditResolverService, ProposalListResolverService]
})
export class ProposalModule {
}
HTML:
此代码位于 “ProposalEditComponent” 中,它是上述模块的一部分。
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
根据 Angular Material 的官方文档:
包含主题需要应用所有核心和主题 您的应用程序的样式。
要开始使用预构建主题,请包含 Angular 之一 Material 在您的应用程序中全局预构建主题。
您只需将以下内容添加到您的
style.css
即可使其正常工作:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
或者您可以直接在 head 标签中包含使用
<link>
标签。 浪费了2天后终于见效了。
如果找不到任何解决方案,只需再次添加角度材料即可。它不会影响您的代码,但会添加 CSS。不要忘记重新启动 Angular 服务器。
ng add @angular/material
您是否尝试过包含 MatInputModule 和 MatFormFieldModule?
我认为您仍然需要包含 MatInputModule,因为您正在处理输入,以便 Angular Material 将初始化输入的样式。
//添加这个
import {MatNativeDateModule, MatDatepickerModule,MatFormFieldModule,MatInputModule } from "@angular/material";
如果您还包含 MatFormFieldModule 会更好,因为您正在处理表单字段。
MatInputModule 被设计为在 MatFormFieldModule 内部工作。 // 检查此链接https://material.angular.io/components/form-field/overview
示例代码。
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
希望这有帮助......
尝试将样式文件添加到您的 angular.json,例如您可以使用深紫琥珀色预建主题:
"styles": [
"node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
]
本页更多信息: https://material.angular.io/guide/getting-started#step-4-include-a-theme
这是基于 Angular 11 的。就像大家说的,我确实确保将样式添加到
angular.json
(已经存在)中,并在 app.module.ts
中进行必要的导入。尽管如此,我的风格仍然很混乱。非常有趣的是,它确实选择了主题颜色,但没有选择控件样式。
我最终在每个组件文件中添加了另一个导入,其中使用了 mat* 组件并且工作正常。
import { MatButtonModule } from "@angular/material/button";
请记住,当您添加该导入时,您的 IDE(在我的例子中是 VS Code 和 Visual Studio 2019)会告诉您(通过将其灰显)不需要它并且可以将其删除。
将此行添加到您的主 style.css 或其他内容中。
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
恐龙
您需要用
input
包裹 <mat-form-field>
元素,然后应用 Material 样式。
<input matInput .... />
光靠它本身是不够的。
您需要:
<mat-form-field>
<input matInput .... />
</mat-form-field>
我知道这可能是一个新手的答案,因为我是 Angular 的新手。但我使用 VSCode 和一个托管 HTML 站点的扩展来实时显示您对代码进行修改时的更改。当您尝试使用它在本地托管 Angular 的组件 html 文件时,它将无法与 Material Angular 中的 CSS 一起使用。 因此,一种可能的解决方案就是:在项目文件夹中打开一个终端并运行:
ng serve
这对我来说很棘手。
在最新版本的 Angular 中,可以通过在 angular.json 文件的 styles [] 中添加 node_modules/ 来解决,如代码片段所示
"styles": ["@angular/material/prebuilt-themes/indigo-pink.css"],
到
"styles": ["node_modules/@angular/material/prebuilt-themes/indigo-pink.css"],