angular-material 相关问题

更新到 Angular 19 后，某些单元测试因 NullInjectorError 失败：没有 ChangeDetectorRef 的提供者

将我的 Angular 项目（包括 Angular Material）更新到 v19 后，我在单元测试中收到如下新错误： NullInjectorError：R3InjectorError（独立[MyComponent]）[CdkSt...

修复角度材质表中的列宽

我正在使用 Angular 材质表并尝试修复几列的宽度，如下所示： 我正在使用 Angular 材料表并尝试修复几列的宽度，如下所示： <mat-table #table [dataSource]="dataSource"> <ng-container matColumnDef="email"> <mat-header-cell *matHeaderCellDef class="myHeader"> No. </mat-header-cell> <mat-cell *matCellDef="let element" > {{element.email}} </mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef class="myHeader"> Name </mat-header-cell> <mat-cell *matCellDef="let element" > {{element.name}} </mat-cell> </ng-container> </mat-table> 在 CSS 中： table { width: 100%; margin-left: auto; margin-right: auto; } .mat-column-email{ width: 150px; } 我在某处读到我们可以使用这种格式来固定列宽： .mat-column-matColumnDef(Field name) { //CSS } 但是上面的格式无论如何似乎都不起作用。谁能帮我解决我做错了什么吗？ 在尝试了很多事情之后，以下解决方案对我有用： .mat-column-email{ max-width: 60px !important; min-width: 60px !important; } 因此，不要设置宽度，而是设置该列的最大宽度和最小宽度。 private startX: number = 0; private startWidth: number = 0; private isResizing: boolean = false; private currentColumn: HTMLElement | null = null; constructor(private el: ElementRef, private renderer: Renderer2) {} @HostListener('mousedown', ['$event']) onMouseDown(event: MouseEvent): void { this.currentColumn = this.el.nativeElement; this.startX = event.clientX; this.startWidth = this.currentColumn!.offsetWidth; this.isResizing = true; this.currentColumn!.classList.add('resizing'); } @HostListener('document:mousemove', ['$event']) onMouseMove(event: MouseEvent): void { if (this.isResizing && this.currentColumn) { const newWidth = this.startWidth + (event.clientX - this.startX); this.renderer.setStyle(this.currentColumn, 'width', `${newWidth}px`); } } @HostListener('document:mouseup') onMouseUp(): void { if (this.isResizing) { this.isResizing = false; if (this.currentColumn) { this.currentColumn.classList.remove('resizing'); this.currentColumn = null; } } }

Ng-19 [错误]“src/main.server.ts”中没有与导入“default”匹配的导出

我正在尝试将我的申请从 18 更新到 19。我面临这个问题。 我添加了 导出默认的AppServerModule 之后我收到了与 vite 相关的问题 主服务器.ts 导入'@angular/pl...

如何在 Angular 2 中的 md-input 中验证电子邮件地址

我有这个 Angular 2 表单，里面有 md-input 元素： 我有这个 Angular 2 表单，里面有 md-input 元素： <form noValidate (ngSubmit)="onSubmit(resetPasswFg)" [formGroup]="resetPasswFg" style="width:400px;border:1px solid black; "> <table style="width:400px;"> <tr> <td> <md-input class="input" mdInput placeholder="Email" type="email" formControlName="email"> <md-hint class="input_error" *ngIf="resetPasswFg.get('email').hasError('required') && resetPasswFg.get('email').touched"> Email required </md-hint> </md-input> </td> </tr> <!-- Other elements --> </form> 这是我的组件内部验证器： ngOnInit() { this.resetPasswFg = new FormGroup({ email: new FormControl('', [Validators.required, Validators.required ]) }) } 现在，如果电子邮件字段不是填充器，md-hint 会正确显示。 现在，如果电子邮件 md-hint 不包含格式正确的电子邮件地址，我也希望 md-input 出现。 我该怎么办？ 您可以通过指令使用电子邮件验证器。请参阅 EmailValidator 类。 通过 NG_VALIDATORS 绑定将电子邮件验证器添加到标有电子邮件属性的控件的指令。 <md-input class="input" mdInput placeholder="Email" type="email" formControlName="email" email> 该指令也可以在包 ng2-validators 中找到。

将 Angular 17 升级到 18 后出错，colorette 的最大调用堆栈错误

我已将我的版本从 Angular 17 升级到 18。 我正在尝试运行 ngserve 或 ngbuild 并收到以下错误。 PP ode_modules\listr2 颂歌模块

Angular 正式只读

如何将我的 Angular Material 字段设置为只读？我查看了他们的 props 文档，没有看到任何与只读字段相关的内容。 我添加了“readonly：true”作为道具......

为什么导航栏不采用我尝试分配的主题

我在 https://stackblitz.com/edit/etnmae-xjweyt 有一个应用程序，似乎无法编译它，更不用说为导航栏分配中性颜色了。 我可以将其从浅色模式更改为深色模式，但想要一些......

在 Angular 中使用 @if() {} 进行内容投影时发出警告 - ngtsc(-998011)

<mat-form-field> <input matInput type="text" id="confirmationKey" placeholder="code de confirmation" formControlName="confirmationKey" > <mat-hint>Saisissez la clé de confirmation reçue par e-mail.</mat-hint> @if(formErrorHandler.getErrorMsg(confirmationKeyControl?.errors); as errorMsg ){ **<mat-error>{{errorMsg}}</mat-error>** } </mat-form-field> 警告信息： Node 匹配“MatFormField”组件的“mat-error, [matError]”插槽，但不会被投影到特定插槽中，因为周围的 @if 在其根处有多个节点。要将节点投影到右侧插槽中，您可以： 将 @if 块的内容包装在与“mat-error, [matError]”选择器匹配的内容中。 将 @if 块的内容拆分为多个 @if 块，使得每个块的根仅具有一个可投影节点。 删除 @if 块中的所有内容，除了正在投影的节点。 可以使用 extendedDiagnostics.checks.controlFlowPreventingContentProjection = "suppress" compiler option.ngtsc(-998011) 禁用此检查 我尝试过的步骤： 我将 @if 块的内容包装在 an 中以匹配 mat-error 槽，但警告仍然存在。 我将逻辑分成单独的 @if 块，确保每个块只有一个可投影节点，但我仍然看到警告。 我不想禁用extendedDiagnostics.checks.controlFlowPreventingContentProjection =“抑制”。 在使用内容投影处理 @if 时我缺少什么？我如何正确构建它以消除警告？ **你在开始和结束时都会弄乱角度编译器。也可能是一个错误，您可以通过在 Angular github 上创建问题来验证。 之前： @if(errorMessage(); as errorMsg ){ **<mat-error>{{errorMsg}}</mat-error>** } 之后： @if(errorMessage(); as errorMsg ){ <mat-error>{{errorMsg}}</mat-error> } Stackblitz 演示

使用 date-fns 和 Angular Material 日期选择器配置区域设置时，日期会消失

我正在尝试在我的 Anuglar 18 应用程序中使用 Angular Material 日期选择器配置 date-fns。但是，当我尝试配置区域设置时，日期选择器中的所有日期都不会出现。如果我记得...

Angular Material DatePicker 自动完成

尝试实现一个搜索栏，您可以在其中按项目名称或日期进行搜索。只是想知道是否有办法禁用日期选择器自动完成？ 问题是： - 如果我搜索...

修改 mat-form-field 的颜色

我找不到更改材质组件的 Azure 和 Blue 主题所提供的颜色的方法。 特别是对于 mat-form-field (matInput)。 超文本标记语言 我找不到更改材质组件的 Azure 和 Blue 主题给出的颜色的方法。 特别是对于 mat-form-field (matInput)。 HTML <mat-form-field appearance="fill"> <mat-label>{{ "pression_amont_minimum" | translate }} (P1)</mat-label> <input matInput type="number" formControlName="PressAmMin" /> </mat-form-field> 尝试通过在 style.css 和 component.css 中引用它来更改组件的样式： mat-form-field{ background-color : white; } 什么都没发生 input{ background-color : white; } 一部分变成了白色 渲染 mat-label{ background-color : white; } ::ng-deep 对我没用 我发现改变的值 .mdc-text-field--filled:not(.mdc-text-field--disabled) { background-color: var(--mdc-filled-text-field-container-color, var(--mat-app-surface-variant)); 可以改变它的颜色，但没有找到方法来到达CSS的这一部分或覆盖它。 不建议针对 Angular Material 组件的内部元素，因为它们随时可能发生变化。但是，您可以为其 CSS 变量提供新值： mat-form-field { --mdc-filled-text-field-container-color: white; } 更新到 v19（当前处于 RC 版本）后，如果您使用 SCSS，则可以使用 overrides mixin 代替： @use '@angular/material' as mat; mat-form-field { @include mat.form-field-overrides(( filled-container-color: white, )); }

打开 Angular Material 对话框会使父显示淡出？

我正在我的项目中实现 Angular Material Dialog。 它正在工作，但是，当我打开对话框时，我的另一个屏幕（调用对话框的父组件）在后台消失。看到我...

Angular (18) Material Tooltip - 如何添加/自定义边框？

截至此问题发布，我正在使用最新版本的 Angular 和 Material。 我设法更改工具提示的背景和文本颜色，覆盖这些变量： --mdc-普通-

如何为 Angular 组件创建自定义生命周期挂钩

我想为 Angular 组件创建自定义生命周期挂钩。 两个例子是我想添加基于浏览器的模糊/焦点以及浏览器上的可见性变化的钩子。 我更愿意...

MatDialog 拖放最新的 Angular 版本

我喜欢在 MatDialog 中实现 DragAndDrop。 对于旧版本的 Angular，例如 Angular 7，有一个解决方案，但对于 Angular 17 为例，该解决方案的工作原理不同。 对于角度...

在单个网络应用程序中拥有多个主题的最佳实践是什么？覆盖或第二主题

我有一个为我创建的应用程序 https://stackblitz.com/edit/angular-gjkbqm-schlk9?file=index.html 这个应用程序展示了如何正确使用主题，这里给出了解释 我如何使用...

更改角度上垫平按钮的边框半径

我正在开发一个角度应用程序，想更改垫平按钮的边框半径。我可以使用 css 更改按钮的背景颜色，但不能更改边框半径。我的代码 ...

如何使用 Roboto 以外的字体？

我刚刚开始使用 Angular 3 并解决了错误。 但是，我在尝试让不同的字体和版式正常工作时遇到问题 我刚刚开始使用 Angular 3，并解决了错误。 但是，我在尝试让不同的字体和版式正常工作时遇到问题 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>StateLineRodz</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="mat-typography mat-app-background"> <app-component-test></app-component-test> <app-root></app-root> </body> </html> 我的风格.scss @use '@angular/material' as mat; $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$blue-palette, tertiary: mat.$magenta-palette, ), ) ); html,body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } :host { display: flex; flex-direction: column; align-items: flex-start; } 角度.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "stateLineRodz": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/state-line-rodz", "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "2kB", "maximumError": "4kB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "stateLineRodz:build:production" }, "development": { "buildTarget": "stateLineRodz:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] } } } } }, "cli": { "analytics": false } } 当我加载页面时，我总是得到相同的字体 我尝试使用不存在的字体加载页面，但没有成功，只需编译并说“确定” 我没有更多线索来猜测这个东西。 首先确保将 font 添加到 index.html。 ... <!-- custom font --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Open+Sans:wght@300&display=swap" rel="stylesheet" /> </head> 在此之后，在styles.scss中，您必须首先定义typography-object。有效值为。 _config-validation.scsss $allowed: ( brand-family, plain-family, bold-weight, medium-weight, regular-weight, use-system-variables, system-variables-prefix ); 因此在顶部定义相同的属性名称$typography-config。 $typography-config: ( // <- notice! plain-family: 'Edu AU VIC WA NT Pre', // <- notice! brand-family: 'Edu AU VIC WA NT Pre', // <- notice! ); // <- notice! 然后将此定义映射到 define-theme、typography 属性，如下所示。 $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); 即使在这些更改之后，您也不会看到正在应用的类型，我们必须调用方法 mat.typography-hierarchy 将版式应用到组件。 @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! 完整代码： @use '@angular/material' as mat; $typography-config: ( // <- notice! plain-family: 'Edu AU VIC WA NT Pre', // <- notice! brand-family: 'Edu AU VIC WA NT Pre', // <- notice! ); // <- notice! $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } html { height: 100%; } @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! Stackblitz 演示

如何在 Angular 18 和 Material 3 中使用 Roboto 以外的字体

我刚刚开始使用 Angular 3 并解决了错误。 但是，我在尝试让不同的字体和版式正常工作时遇到问题 我刚刚开始使用 Angular 3，并解决了错误。 但是，我在尝试让不同的字体和版式正常工作时遇到问题 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>StateLineRodz</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="mat-typography mat-app-background"> <app-component-test></app-component-test> <app-root></app-root> </body> </html> 我的风格.scss @use '@angular/material' as mat; $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$blue-palette, tertiary: mat.$magenta-palette, ), ) ); html,body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } :host { display: flex; flex-direction: column; align-items: flex-start; } 角度.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "stateLineRodz": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/state-line-rodz", "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "2kB", "maximumError": "4kB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "stateLineRodz:build:production" }, "development": { "buildTarget": "stateLineRodz:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] } } } } }, "cli": { "analytics": false } } 当我加载页面时，我总是得到相同的字体 我尝试使用不存在的字体加载页面，但没有成功，只需编译并说“确定” 我没有更多线索来猜测这个东西。 首先确保将 font 添加到 index.html。 ... <!-- custom font --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Open+Sans:wght@300&display=swap" rel="stylesheet" /> </head> 在此之后，在styles.scss中，您必须首先定义typography-object。有效值为。 _config-validation.scsss $allowed: ( brand-family, plain-family, bold-weight, medium-weight, regular-weight, use-system-variables, system-variables-prefix ); 然后将此定义映射到 define-theme、typography 属性，如下所示。 $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); 即使在这些更改之后，您也不会看到正在应用的类型，我们必须调用方法 mat.typography-hierarchy 将版式应用到组件。 @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! 完整代码： @use '@angular/material' as mat; $typography-config: ( // <- notice! plain-family: 'Edu AU VIC WA NT Pre', // <- notice! brand-family: 'Edu AU VIC WA NT Pre', // <- notice! ); // <- notice! $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } html { height: 100%; } @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! Stackblitz 演示

动态更改角度材质材质主题

我是 Angular 新手，想要动态更改 Angular 材质主题，我知道如何制作不同的主题，即通过制作 scss 文件，定义 3 种颜色，包括 mat 属性和功能...