无法在自定义包装组件中扩展角度材质 MatDivider

Question

我正在 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

类，但它没有按预期显示。

问题

1. Angular Material 中是否存在阻止扩展像

   MatDivider

   这样的组件的特定限制？
2. 是否有其他方法可以有效地包装

   MatDivider

   ，以便我可以控制主题而不需要用户直接导入 Angular Material？

任何指导或解决方法建议将不胜感激！

Answer 1

您需要将

MatListModule

添加到导入数组才能使用该指令。

imports: [MatDividerModule],

您还需要始终在包装类中包含

component theme

mixins，我已使用

:host

作为包装元素。

@use '@angular/material' as mat;
@use '../styles' as *;
:host {
  @include mat.divider-theme($theme);
}

完整代码：

TS：

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 {}

HTML：

<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>

Stackblitz 演示