我正在 Angular 中创建一个自定义包装组件来扩展 Angular Material 的
MatDivider
,但我遇到了来自 MatDivider
的组件样式和属性未正确应用的问题。目标是抽象 MatDivider
,这样我的库的用户就不需要直接导入 Angular Material。
自定义包装组件(TypeScript):
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { MatDivider } from '@angular/material/divider';
/**
* `DividerComponent` is a wrapper around Angular Material’s MatDivider.
* It extends MatDivider and is intended to provide the same functionality
*
*/
@Component({
selector: 'aal-divider',
standalone: true,
template: '',
styleUrls: ['./divider.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DividerComponent extends MatDivider {}
SCSS(divider.component.scss):
@use '@angular/material' as mat;
@use '../../themes/theming' as *;
@include mat.divider-theme($aal--mat-light-theme);
当我尝试使用
DividerComponent
时,MatDivider
的预期样式和行为似乎并未延续,即使我扩展了课程。我在 DOM 中看到 mat-divider
类,但它没有按预期显示。
MatDivider
这样的组件的特定限制?MatDivider
,以便我可以控制主题而不需要用户直接导入 Angular Material?任何指导或解决方法建议将不胜感激!
您需要将
MatListModule
添加到导入数组才能使用该指令。
imports: [MatDividerModule],
您还需要始终在包装类中包含
component theme
mixins,我已使用 :host
作为包装元素。
@use '@angular/material' as mat;
@use '../styles' as *;
:host {
@include mat.divider-theme($theme);
}
import {
ChangeDetectionStrategy,
Component,
ViewEncapsulation,
} from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatListModule } from '@angular/material/list';
import { MatDivider } from '@angular/material/divider';
/**
* `DividerComponent` is a wrapper around Angular Material’s MatDivider.
* It extends MatDivider and is intended to provide the same functionality
*
*/
@Component({
selector: 'aal-divider',
standalone: true,
imports: [MatDividerModule],
template: '<mat-divider></mat-divider>',
styles: [
`
@use '@angular/material' as mat;
@use '../styles' as *;
:host {
@include mat.divider-theme($theme);
}
`,
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DividerComponent extends MatDivider {}
/**
* @title Basic divider
*/
@Component({
selector: 'divider-overview-example',
templateUrl: 'divider-overview-example.html',
standalone: true,
imports: [MatListModule, DividerComponent, MatDividerModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DividerOverviewExample {}
<mat-list>
<mat-list-item>Item 1</mat-list-item>
<aal-divider></aal-divider>
<mat-list-item>Item 2</mat-list-item>
<aal-divider></aal-divider>
<mat-list-item>Item 3</mat-list-item>
</mat-list>
<hr />
<mat-list>
<mat-list-item>Item 1</mat-list-item>
<aal-divider></aal-divider>
<mat-list-item>Item 2</mat-list-item>
<aal-divider></aal-divider>
<mat-list-item>Item 3</mat-list-item>
</mat-list>