Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
我正在尝试将我的图像与 位置：-webkit-sticky； 位置：粘性； 顶部：1 像素； 但无法实现。 HTML： 我正在尝试将我的图像粘贴到 position: -webkit-sticky; position: sticky; top: 1px; 但是无法实现。 HTML: <mat-tab-group class="user-tabs" (selectedTabChange)="changeUserTab($event)"> <mat-tab label="Selectable Tasks"> <mat-tab-group class="user-chats" (selectedTabChange)="changeChatTab($event)"> <mat-tab *ngFor="let chat of userData.chats; let i = index;"> <img> </mat-tab> </mat-tab-group> </mat-tab> </mat-tab-group> 我的选项卡里面有选项卡，是的。有人对此有解决方案吗？谢谢。 解决方案如下： <mat-tab-group id="my-tab-group" mat-stretch-tabs [selectedIndex]="tab" (selectedIndexChange)="changeTab($event)" > <mat-tab> <custom-component-with-sticky-content></custom-component-with-sticky-content> </mat-tab> <mat-tab> <my-second-component></my-second-component> </mat-tab> </mat-tab-group> ... 和CSS： styles: [ ` /* Needed in order to allow the sticky content */ ::ng-deep #my-tab-group .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active { overflow: visible !important; } ::ng-deep #my-tab-group .mat-tab-body-wrapper { overflow: visible !important; } ::ng-deep #my-tab-group .mat-tab-body-wrapper .mat-tab-body-content { overflow: visible !important; } `, ], 我能够使用 *ngTemplateOutlet 让它工作（以及其他答案的一些帮助，但没有 ngTemplateOutlet 还不够） HTML： <div class="main-container" id="main-container"> <mat-tab-group id="tabs" #tabs> <mat-tab label="myTabLabel"> (your code here) </mat-tab> </mat-tab-group> </div> <ng-container *ngTemplateOutlet="idek"> </ng-container> <ng-template #idek> <mat-toolbar color="warn" >Second Toolbar</mat-toolbar> <div id="add-spacing"> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </div> </ng-template> CSS： ::ng-deep #tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active { overflow: visible !important; } ::ng-deep #tabs .mat-tab-body-wrapper { overflow: visible !important; } ::ng-deep #tabs .mat-tab-body-wrapper .mat-tab-body-content { overflow: visible !important; } mat-toolbar { --default-height: 50px !important; } mat-toolbar { position: sticky !important; top: var(--default-height) !important; } .main-container { (your code here) } 结果： 请尝试position:fixed，如果需要的话还可以添加z-index:999。 找到了一个原因 - 当至少一个父级将 overflow 设置为 hidden 时，它将不起作用，这就是 mat-tabs 的情况。 Angular 15+（mdc 迁移后） HTML： <mat-tab-group id="my-tab-group" mat-stretch-tabs [selectedIndex]="tab" (selectedIndexChange)="changeTab($event)" > <mat-tab> <custom-component-with-sticky-content></custom-component-with-sticky-content> </mat-tab> <mat-tab> <my-second-component></my-second-component> </mat-tab> CSS： ::ng-deep #my-tab-group .mat-mdc-tab-body-wrapper .mat-mdc-tab-body.mat-mdc-tab-body-active { overflow: visible !important; } ::ng-deep #my-tab-group .mat-mdc-tab-body-wrapper { overflow: visible !important; } ::ng-deep #my-tab-group .mat-mdc-tab-body-wrapper .mat-mdc-tab-body-content { overflow: visible !important; }
Angular 5 - 如何使用 Angular Material 工具提示
我正在按照此链接在 Angular 5 中实现工具提示。 https://material.angular.io/components/tooltip/api 但我不明白如何实际实施这一点。 任何机构都可以添加
如何使主题与 Angular 18 和 Materials 3 兼容
我无法理解为什么会遇到这些问题 我尝试跟踪大量会话，观看视频，但到目前为止我发现的所有内容都取决于 app.module.ts，这不是
我正在使用 Angular prime-ng 并与它一起使用 mat-autocomplete。 我已经使用过它并且工作得很好，但是当我在 prime-ng 侧边栏中重复使用它并单击表单字段时，它会显示选项列表
如何在 Angular 6+ 中更改 mat-paginator 中的 itemsPerPageLabel
我正在使用 Angular 6.0.3 和 Angular Material 7.1.0，我的分页器位于单独的组件中（不是 app.component）。到目前为止我已经尝试过： 创建了名为 myPagni 的单独 ts 文件...
我在我的应用程序中使用 Angular Material，并具有以下按钮设置 我的留言 &l...
我正在尝试对输入字段上的 (focusout) 事件的 Angular Material Date 选择器进行一些验证。如果在验证过程中发现问题，我会将焦点返回到 Mat Date Picker...
我无法更改 Angular 中切换按钮的颜色。 这是我的代码： 切换 ::ng-deep .custom-toggl...
Angular 18 中是否有可用材质 3 的组件 mixin 的列表？
我一直在尝试制作自定义 Material 3 主题，我在制作类和使用 mat.get-theme-color 方面取得了一些成功。然而，在示例中，使用分页器会对按钮产生连锁反应......
我无法将输入值垂直居中。 当密度为 -3 且字体大小为 1em 时，输入的值未正确居中。 还有标签对齐时...
（Angular Material）mat-error 消息未显示在 mat-form-field 中
我正在使用 Angular Material 对 mat-form-field 输入进行一些验证。问题是 mat-error 消息没有显示，输入字段周围的轮廓也没有显示。我明白了...
Angular Material - 元素叠加在图像上（在 MD 卡中）
我正在尝试使用角度材料重现以下内容（也就是说，在图像上添加动态文本）： 文字覆盖图像 我想用md卡，因为方便。 我的问题...
当我们在 Angular 中使用日期选择器输入出生日期时如何显示年龄？ （使用打字稿）
这是我的 HTML 代码， ` 选择日期 这是我的 HTML 代码， ` <mat-form-field class="datepicker"> <mat-label>Pick a date</mat-label> <input matInput #resultPickerModel="ngModel" [matDatepicker]="resultPicker" [(ngModel)]="date" [min]="minDate" [max]="maxDate" (input)="ageFromDateOfBirthday($event)"> <mat-datepicker-toggle matSuffix [for]="resultPicker"></mat-datepicker-toggle> <mat-datepicker #resultPicker> </mat-datepicker> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerParse')"> "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date! </mat-error> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMin')"> Minimum date should be {{minDate | date }}</mat-error> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMax')"> Maximum date should be {{maxDate | date }} </mat-error> </mat-form-field> </mat-grid-tile> <mat-grid-tile> <mat-form-field appearance="fill" class="age"> <mat-label>Age</mat-label> <input type="number" matInput > </mat-form-field> </mat-grid-tile>` 在这里，当我们在日期选择器中选择年龄时，我必须在输入文本框中提供AGE。 请让我知道任何解决方案。 也许这段代码可以帮助你： getAge(birthDate: Date): number { const ageTilNowInMilliseconds = Date.now() - birthDate.getTime(); const ageDate = new Date(ageTilNowInMilliseconds); return Math.abs(ageDate.getUTCFullYear() - 1970); // Because computers count the today date from the 1st of January 1970 } 希望对您有帮助。
我正在 Angular 中创建一个自定义包装器组件来扩展 Angular Material 的 MatDivider，但我遇到了问题，MatDivider 中的组件样式和属性未应用到...
如何使<mat-tab-group>的标题粘/固定在顶部？ （角材料18）
我有以下代码： 我有以下代码： <div class="flex-auto overflow-y-auto"> <mat-tab-group [animationDuration]="'0'" headerPosition="below" mat-stretch-tabs="false" > <div cdkScrollable> <!-- Tab #1 --> <mat-tab label="List 1"> <!-- TAB CONTENT GOES HERE --> <app-leads></app-leads> </mat-tab> <!-- Tab #2 --> <mat-tab label="List 2"> <!-- TAB CONTENT GOES HERE --> <inventory-list></inventory-list> </mat-tab> </div> </mat-tab-group> </div> 这会产生以下结果： 问题是每当选项卡中的内容向上或向下移动时，选项卡组的标题不可见（不粘）。 如何解决？ 使用CSS粘性属性“position：sticky”
当用户尝试在 mat-select 中选择另一个值时，我想显示弹出窗口以确认用户是否确实想要选择另一个值。我及时显示弹出窗口的问题是所选值是......
为什么 Angular Material 工具提示会破坏我的单元测试？
我有以下单元测试文件，它是另一个类似组件的工作文件的副本，与样板 Angular CLI 输出相距不远： 导入 { 异步，ComponentFixture，Te...
如何在单击已选择的项目时重置 mat-radio-group？ （切换功能）
我有一个垫子无线电组中的项目列表。当我单击已选择的单选按钮时，我想要一个组范围的切换功能。 如果选择 A 并单击 B，则 B 会被选中....
Angular Reactive Form - 使用对象而不是值修补表单控件时出现问题
我在 Angular 表单中使用 mat-select 来让用户选择多个国家/地区作为具有 id 和 name 属性的对象。但是，我需要用完整的国家/地区对象来修补表单控件...
使用对象而不是 Angular 响应式表单中的值来修补表单控件的问题
我在 Angular 表单中使用 mat-select 来让用户选择多个国家/地区作为具有 id 和 name 属性的对象。但是，我需要用完整的国家/地区对象来修补表单控件...