angular-material 相关问题

Angular Mat Paginator：如何防止页面更改或页面大小更改？

看起来 MatPaginator 仅在用户进行此类更改（PageEvent 事件）后才会通知。 还有一种方法可以拒绝页面更改或页面大小的更改吗？ 可能有用...

角度材质 mat-select 中多选模式下值必须是数组

我正在使用角形材料垫选择组件。 ...

停止 mat-checkbox 内 mat-select 的事件传播

我的里面有一个。当 发生变化时，它也会切换 ，我不希望发生这种情况。 我已经尝试过我们...

使用 viewChild 信号后无法更改 Angular Materials 分页器值

我需要更改我的表分页器 pageIndex 和 pageSize，当我使用 ViewChild 时，我的代码运行良好，但我想使用信号查询，当我使用信号查询时，我收到此错误； 写入信号我...

Angular 5 Material - 如何设置 mat-nav-list 锚链接在单击时处于活动状态

如何将锚链接设置为在我的实现中处于活动状态。 .html 如何将锚链接设置为在我的实施中处于活动状态。 .html <mat-nav-list class="conversation-list"> <mat-list-item *ngFor="let conversation of conversations"> <a (click)="goToChat(conversation)">{{getOtherUsers(conversation)}}</a> </mat-list-item> </mat-nav-list> <div class="chat-box"> <router-outlet></router-outlet> </div> .ts goToChat(conversation) { this.router.navigate(['main/chat/', conversation._id]); } .routing.module.ts import { ChatComponent } from './chat.component'; import { ChatDetailComponent } from './chat-detail/chat-detail.component'; const CHAT_ROUTES = [ { path: '', component: ChatComponent, children: [ { path: ':id', component: ChatDetailComponent } ] }, ]; 上面的代码循环用户对话并创建他们正在聊天的用户列表。每个列表项都是指向页面右侧聊天组件的链接。当用户单击链接时，我希望将其设置为活动状态。 通过添加 routerLinkActive 指令将锚点设置为“活动”类： <mat-nav-list> <a mat-list-item routerLinkActive="active">{{link.title}}</a> </mat-nav-list> 问题是 Angular Material 包中显然没有为活动状态定义样式： 角度材料/src/lib/list/_list-theme.scss 角度材料/src/lib/list/list.scss 因此必须定义一个活动样式： .mat-nav-list a.active { background: blue; } routerLinkActive 是 routerLink 的属性，因此它只能与 routerLink 绑定一起使用。 要设置活动链接的样式，请将 routerLink 设置为路线的路径，并将 routerLinkActive 设置为您自己的类，您将使用它来指示“活动”。 例如： <a [routerLink]=`main/chat/'${conversation._id}` routerLinkActive="active-link">{{getOtherUsers(conversation)}}</a> 现在使用 css 来定位链接： .active-link { background-color: grey; } 其他答案依赖于自定义类。然而，mat-list-item有一个我们可以利用的activated输入。我们只需要让 mat-list-item 和 routerLinkActive 互相“交谈”即可。角度指令是一个完美的解决方案。 /* eslint-disable @angular-eslint/directive-selector */ import { Directive, OnDestroy } from '@angular/core'; import { MatListItem } from '@angular/material/list'; import { RouterLinkActive } from '@angular/router'; import { Subscription } from 'rxjs'; @Directive({ selector: '[mat-list-item][routerLinkActive]', standalone: true, }) export class RouterActivatedMatListItemDirective implements OnDestroy { private subs = new Subscription(); constructor(matListItem: MatListItem, routerLinkActive: RouterLinkActive) { this.subs.add( routerLinkActive.isActiveChange.subscribe((isActive) => { matListItem.activated = isActive; }) ); } ngOnDestroy() { this.subs.unsubscribe(); } } 注意选择器如何同时定位 - mat-list-item 和 routerLinkActive。这意味着我们将通过依赖注入获得两个实例。角度太棒了！ 该指令是 standalone，因此请确保将其添加到包含链接的组件的导入中，或者如果您使用 NgModules，则将其包含在相应的模块中。无需更改模板中的任何其他内容 - 它就可以正常工作！ 您可以使用 .mat-list-item-focus 类来聚焦列表项： <mat-nav-list> <mat-list-item class="mat-list-item-focus">Focused List Item</mat-list-item> <mat-list-item>Not Focused List Item</mat-list-item> </mat-nav-list> 角 19： 如果您在描述选项卡上查看 RouterLinkActive 文档： https://angular.dev/api/router/RouterLinkActive?tab=description 它说： 要直接检查链接的 isActive 状态，请分配 RouterLinkActive 实例到模板变量。例如， 以下检查状态而不分配任何 CSS 类： <a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive"> Bob {{ rla.isActive ? '(already open)' : ''}} </a> 所以你可以这样做： <mat-nav-list> <a mat-list-item routerLink="/my-route" routerLinkActive #rla="routerLinkActive" [activated]="rla.isActive">My Route</a> </mat-nav-list> 尝试使用类似的东西： <a [routerLink]="['main/chat/',conversation._id]">{{getOtherUsers(conversation)}}</a> 有关更多信息，请访问 https://angular.io/guide/router#router-links

如何为垫子凸起按钮添加边框？

下面的代码不起作用。我尝试对没有“mat-raised-button”属性的按钮使用相同的样式，并且它有效，所以我认为这可能是一些问题。 如何添加边框...

对结果进行分组时无法对 Angular mat-table 中的数据进行排序

我按照此视频在我的材质表中创建了分组视图，但我无法对结果进行排序。 我想要的是： **年** 春季期间的所有活动 所有活动...

与 <mat-icon>（角度材质）一起使用时我们可以更改 svgicon 颜色吗

所以我有一个 svg 图标，我使用有角度的材料来显示它，并想更改悬停时的颜色，但到目前为止我还无法做到这一点。 这是供参考的代码： 所以我有一个 svg 图标，我使用有角度的材料来显示它，并想更改悬停时的颜色，但到目前为止我还无法做到这一点。 以下是参考代码： <mat-icon svgIcon="menu"></mat-icon> 但是当我尝试时，图标出现了， <mat-icon class="color" svgIcon="menu"></mat-icon> 以及CSS部分 .color:hover, .color:active{ color: black; fill: black; } 这不起作用。 任何帮助将不胜感激，谢谢。 今天早上我自己解决了这个问题，我所做的基本上是用文本编辑器打开 svg 文件，并且在长“Path”属性的末尾有一个填充属性，我只是删除了该部分，现在它工作得很棒。 示例（之前）：- <path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866" fill="#ffffff";/>` 之后：- <path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866"/> 现在一切正常，悬停也正常...非常感谢您仍在研究它。 SVG 图标默认为黑色，除非另有说明，您发布的代码似乎有效，尝试将鼠标悬停时的颜色属性更改为 red 并查看是否可以看到更改。 将 SVG 的填充变量写入 currentColor，如下所示： <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/> </svg> 之后你可以像这样改变颜色：<mat-icon svgIcon="hero" style="color: red;" />

如何正确更改带角度的垫子图标的颜色？

我查看了文档，并尝试更改垫子图标的颜色，如下所示： 我查看了文档，并尝试更改垫子图标的颜色，如下所示： <mat-icon class="white" color="primary" svgIcon="back"></mat-icon><span class="backText">back</span> 上面是元素在 html 中的样子。我尝试通过添加白色的类来更改图标的颜色。这是行不通的。我尝试添加指令 color="primary" ，但它也不起作用，而我的所有按钮都像这样 <button mat-button color='primary'>example button</button> 收到颜色。我想让我的垫子图标随调色板改变颜色，因为这应该根据文档工作。但最终我还希望能够将图标的颜色更改为白色，这是我的调色板上不存在的颜色。 如何将 <mat-icon> 的颜色更改为工作调色板中的颜色以及调色板上没有的颜色？ 谢谢！ 使用 NgStyle 指令。 <mat-icon [ngStyle]="{'color':'white'}">home</mat-icon> 您有两个选项来更改 mat-icon 的颜色。 颜色属性 您可以使用 color 属性，该属性将使用主题中指定的值。它只接受三个属性："primary"、"accent"或"warn"。 <mat-icon color="primary" svgIcon="archive"></mat-icon> <mat-icon color="accent" svgIcon="archive"></mat-icon> <mat-icon color="warn" svgIcon="archive"></mat-icon> 自定义样式 添加指定了 color 的自定义样式类： .green-icon { color: green; } 为您的图标添加类别： <mat-icon class="green-icon" svgIcon="archive"></mat-icon> 演示 我在 stackblitz 上创建了一个 演示，可以更改 SVG 的颜色 mat-icon。 将 SVG 的填充变量写入 currentColor，如下所示： <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/> </svg> 之后你可以像这样改变颜色：<mat-icon svgIcon="hero" style="color: red;" />

有角度的材料设计不需要单选按钮，而只需要按钮[关闭]

下面是我的div 下面是我的div <div class="formField"> <mat-radio-group aria-label="Select a state" formControlName="selectedActivity"> <mat-radio-button style=" display: inline-flex !important; align-items: center; justify-content: center; margin: 5px; border: 1px solid #bdbdbd !important; background-color: #fff !important; box-sizing: border-box !important; position: relative; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; " [value]="selectItem" *ngFor="let selectItem of selectArray" (click)="checkRadioButton($event)"> <span [appTranslate]="selectItem.select"></span> </mat-radio-button> </mat-radio-group> </div> div 当前显示此 我需要这个布局 我尝试使用按钮但不起作用，垫按钮也不起作用 我正在使用角度 16 您可以使用scss来实现这一点，我们只需隐藏与单选按钮部分.mdc-radio相关的部分，我们将其设为零宽度并使用overflow: hidden隐藏溢出的内容。然后我们只需设置其余元素的样式即可实现所需的输出。 :host ::ng-deep .custom-radio-group { mat-radio-button { display: inline-flex !important; align-items: center; justify-content: center; margin: 5px; border: 1px solid #bdbdbd !important; background-color: #fff !important; box-sizing: border-box !important; position: relative; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; } .mat-mdc-radio-checked { background-color: lightblue !important; border: 1px solid blue; } .mdc-label { cursor: pointer; padding: 2px 20px !important; } .mdc-radio { width: 0px !important; overflow: hidden !important; padding-left: 0px; padding-right: 0px; } } Stackblitz 演示

如何解决 Angular Material 侧边栏的滚动问题

我的预期结果： 在桌面上时，屏幕左侧有一个“固定”侧边栏，它占据全屏高度，宽度为 226 像素。 在移动设备上应该有一个可用的工具栏...

Angular 18，mat-select 绑定不适用于 formControlName 属性

Angular 自定义控制组件有以下代码 @成分（{ 选择器：'材质自定义控制'， templateUrl: './material-custom-control.component.html', styleUrls: ['./material-custom-

使用 Angular Material 进行 Sass 迁移

我在 Angular Material 中有一个具有许多定义的全局样式表。我使用 SASS 操作符中的 @import 。根据文档，我应该迁移导入，因为它们已被弃用 -

在 mat-autocomplete 中使用 `patchValue` 设置值后，下拉选项 `<mat-option>` 未在视觉上被选中

当前行为： 当通过 getProducts 方法内的 patchValue 设置产品表单控件的值时，表单控件会正确更新其值。然而，相应的 当前行为： 当通过 patchValue 方法内的 getProducts 设置产品表单控件的值时，表单控件会正确更新其值。但是，自动完成下拉列表中相应的 <mat-option> 不会在视觉上显示为在组件初始加载时选择的。 预期行为： 加载组件时，与 <mat-option> 设置的值相对应的 patchValue 应在视觉上显示为在自动完成下拉列表中选择。 重现步骤： 打开应用程序并导航至步进器组件。 在步骤 1 中选择用户。 继续执行步骤 2，其中 getProducts 方法使用 productCtrl 以编程方式设置 patchValue 控件的值。 打开产品选择的自动完成下拉列表。 代码片段： <mat-stepper linear #stepper (selectedIndexChange)="selectedStepperIndex.set($event)" > <mat-step [stepControl]="userFormGroup"> <form class="example-form" [formGroup]="userFormGroup"> <ng-template matStepLabel>Step 1</ng-template> @defer (when selectedStepperIndex() === 0; prefetch on idle) { <user [form]="userFormGroup"></user> } <div> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step [stepControl]="productFormGroup"> <form [formGroup]="productFormGroup"> <ng-template matStepLabel>Step 2</ng-template> @defer (when selectedStepperIndex() === 1; prefetch on idle) { <product [form]="productFormGroup" [selectedUserId]="userFormGroup.controls.userCtrl.value?.id ?? ''" ></product> } <div> <button mat-button matStepperPrevious>Back</button> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step> <ng-template matStepLabel>Done</ng-template> <p>You are now done.</p> <div> <button mat-button matStepperPrevious>Back</button> <button mat-button (click)="stepper.reset()">Reset</button> </div> </mat-step> </mat-stepper> import { Component, inject, signal } from '@angular/core'; import { FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl, FormGroup, } from '@angular/forms'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatStepperModule } from '@angular/material/stepper'; import { MatButtonModule } from '@angular/material/button'; import { UserComponent } from 'src/user/user.component'; import { ProductComponent } from 'src/product/product.component'; export interface User { id: string; name: string; } export interface Product { id: string; desc: string; } export interface UserForm { userCtrl: FormControl<User | null>; } export interface ProductForm { productCtrl: FormControl<Product | null>; } @Component({ selector: 'stepper-editable-example', templateUrl: 'stepper-editable-example.html', styleUrl: 'stepper-editable-example.css', imports: [ MatButtonModule, MatStepperModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, UserComponent, ProductComponent, ], }) export class StepperEditableExample { private _formBuilder = inject(FormBuilder); selectedStepperIndex = signal(0); userFormGroup: FormGroup<UserForm> = this._formBuilder.group({ userCtrl: [null as User | null, Validators.required], }); productFormGroup: FormGroup<ProductForm> = this._formBuilder.group({ productCtrl: [null as Product | null, Validators.required], }); } <mat-form-field class="example-full-width"> <mat-label>User</mat-label> <input type="text" placeholder="Pick one" matInput [formControl]="form.controls.userCtrl" [matAutocomplete]="auto" /> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"> @for (user of users; track user) { <mat-option [value]="user">{{ user.name }}</mat-option> } </mat-autocomplete> </mat-form-field> import { Component, Input } from '@angular/core'; import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { User, UserForm } from 'src/example/stepper-editable-example'; @Component({ selector: 'user', templateUrl: 'user.component.html', styleUrl: 'user.component.css', imports: [ FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, ], }) export class UserComponent { @Input() form: FormGroup<UserForm>; users: User[] = [ { id: '1', name: 'John', }, { id: '2', name: 'David', }, { id: '3', name: 'Smith', }, ]; displayFn(user: User): string { return user ? user.name : ''; } } <div style="display: flex; flex-direction: column;"> <mat-form-field class="example-full-width"> <mat-label>Product</mat-label> <input type="text" placeholder="Pick one" matInput [formControl]="form.controls.productCtrl" [matAutocomplete]="autoProduct" /> <mat-autocomplete #autoProduct="matAutocomplete" [displayWith]="displayProductFn" > @for (product of products; track product) { <mat-option [value]="product">{{ product.desc }}</mat-option> } </mat-autocomplete> </mat-form-field> </div> import { Component, Injectable, Input, OnChanges, OnInit, SimpleChanges, } from '@angular/core'; import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { Product, ProductForm, User, } from 'src/example/stepper-editable-example'; import { HttpClient } from '@angular/common/http'; import { BehaviorSubject, Observable, of } from 'rxjs'; @Component({ selector: 'product', templateUrl: 'product.component.html', styleUrl: 'product.component.css', imports: [ FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, ], }) export class ProductComponent implements OnInit { @Input() form: FormGroup<ProductForm>; private _selectedUserId: string = ''; private isFirstChange = true; @Input() get selectedUserId(): string { return this._selectedUserId; } set selectedUserId(value: string) { if (this._selectedUserId !== value) { this._selectedUserId = value; if (!this.isFirstChange) { console.log('SETTER INSIDE IF...'); this.onSelectedUserIdChange(); } this.isFirstChange = false; } } products: Product[] = []; constructor(private productService: ProductService) {} ngOnInit() { if (this.selectedUserId) { this.getProducts(); } } displayProductFn(product: Product): string { return product ? product.desc : ''; } getProducts() { this.productService .getProductsService(this.selectedUserId ? this.selectedUserId : '') .subscribe((products) => { this.products = products; this.form.patchValue({ productCtrl: products[1], }); }); } private onSelectedUserIdChange(): void { this.form.controls.productCtrl.setValue(null); this.getProducts(); } } @Injectable({ providedIn: 'root' }) export class ProductService { private sub = new BehaviorSubject<Product[]>([]); private productMap: { [key: string]: Product[] } = { '1': [ { id: '1', desc: 'One', }, { id: '2', desc: 'Two', }, { id: '3', desc: 'Three', }, ], '2': [ { id: '1', desc: 'Four', }, { id: '2', desc: 'Five', }, { id: '3', desc: 'Six', }, ], '3': [ { id: '1', desc: 'Seven', }, { id: '2', desc: 'Eight', }, { id: '3', desc: 'Nine', }, ], }; public observable$: Observable<Product[]> = this.sub.asObservable(); constructor(private httpClient: HttpClient) {} getProductsService(userId: string): Observable<Product[]> { const products = this.productMap[userId] || []; return of(products); // return this.httpClient.get<Product[]>(http://api/${userId}); } } 环境： 角度：18.2.9 角材质：18.2.10 StackBlitz 链接：https://stackblitz.com/edit/zzialkdj-d8rtr2sa 您正在使用 autocomplete 而不是 select。 使用自动完成功能，当选择一个值时，列表应仅显示所选值。这意味着您实现的逻辑不正确，因为您缺少必要的处理，如官方文档所示： filteredOptions: Observable<Product[]>; private _filter(... 如果您想要所描述的行为，您应该考虑使用选择而不是自动完成，因为它更适合您的要求。 <mat-select [formControl]="form.controls.productCtrl"> @for (product of products; track product) { <mat-option [value]="product">{{ product.desc }}</mat-option> } </mat-select>

Angular Material：更改对话框窗口的背景颜色

我不知道为什么，但我的对话框是黑色的（#424242）而不是白色（默认情况下），这对于我的数据表来说是相同的。 覆盖 CSS 不起作用。 有谁知道如何更改背景...

Angular FormControlName 与 NgModel 绑定

我有一个使用 Angular 的 FormgroupName 或 NgModel 的一般问题。 我正在阅读的文档说 NgModel 在版本 6 中已被弃用，但它在 17/18（今天的当前版本）中仍然可用。

我们可以在 Angular 的 *For* 循环中使用 <mat-error></mat-error>吗

我创建了一个通用组件。我陷入了一个问题，我正在使用有角度的材料并使用垫子形式场。我在 Angular 18 中使用 @if 来检查条件，然后 mat-error 正在工作...

外包 UI/UX，同时对应用程序代码保密

我想将一些 UI/UX 工作外包给专业设计师，同时专注于开发我的网络应用程序。我怎样才能提供一些粗略的视图和模板供设计师使用，同时保持......

带动态多标题行的角垫桌

我想在角垫表的帮助下创建下表。 它由 2 个带有动态值的标题行组成。 mat-table 上的示例 - 在这里，它的顶行是静态的 - https://v15.material.angular.io/

NG0203：必须从注入上下文调用 Inject()。角度 v19.0.1

如所见，接收注入上下文的常见角度错误。试图让所有各种角度组件包都在 v19.0.1 上，但某种不匹配仍然存在。试过了