如何访问组件中的角材料颜色？

Posted 2021-05-03

例如，在角形材料中，我们可以将颜色传递给角形材料成分作为属性

<button mat-raised-button color="primary">Example</button>

我正在使用多个角度材料主题，这些主题会动态变化。

必需行为：通过主题更改动态更改自定义组件的颜色。

我想要这样的东西：

<app-footer color="primary"></app-footer>

如何在我的自定义组件中获得颜色？我尝试过的我的组件中有一个输入属性

@Input() color;

并尝试在组件中传递颜色

<app-footer color="primary"></app-footer>

但是它对我没有用。如何实现呢？==更新==

说明：下面的代码行来自其github存储库中的角材料的button.ts文件

/**
 * Material design button.
 */
@Component({
  moduleId: module.id,
  selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button],
             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],
             button[mat-flat-button]`,
  exportAs: 'matButton',
  host: {
    '[attr.disabled]': 'disabled || null',
    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
  },
  templateUrl: 'button.html',
  styleUrls: ['button.css'],
  inputs: ['disabled', 'disableRipple', 'color'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

链接到文件：Button.ts 在这里您可以看到，它以颜色作为输入。同样，我在页脚组件中也将颜色用作输入。现在使用<app-footer color="primary"></app-footer>在页脚组件中输入了primary字符串作为输入。如何从中获取颜色十六进制以设置页脚组件的背景颜色。请注意，原色会随着主题的变化而动态变化，因此，我无法对颜色进行硬编码。

答案

您需要在Angular Material组件上实际设置[color]属性。

例如

color: string = 'primary'

HTML：

<button [color]="color">My Button</button>

我为您的here创建了一个最小的示例。

另一答案

我找到了解决方案。我将其发布在此处，以便如果其他人在其角度应用程序中需要类似的行为，则可以通过以下方式获得它。

我为页脚创建了一个mixin

@mixin footer-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    app-footer {
      .footer {
          background-color: mat-color($primary);
      }
    }
  }

[app-footer是组件选择器，.footer是我要向其应用主要背景颜色的页脚组件的类。

然后我在具有多个主题的app_theme.scss文件中添加了页脚混合

@import '~@angular/material/theming';
@import './app/shared/footer/footer-theme';

@include mat-core();


$primary1: mat-palette($mat-teal, 500);
$accent1:  mat-palette($mat-green, A200, A100, A400);

$warn1:    mat-palette($mat-red);

$theme1: mat-light-theme($primary1, $accent1, $warn1);

@include angular-material-theme($theme1);
@include footer-theme($theme1);

// SECOND THEME
$primary2: mat-palette($mat-indigo, 500);

$accent2:  mat-palette($mat-blue, A200, A100, A400);

$warn2:    mat-palette($mat-red);

$theme2: mat-light-theme($primary2, $accent2, $warn2);

.second-theme {
    @include angular-material-theme($theme2);
    @include footer-theme($theme2);
}

在app.component.html] >>

<div [ngClass]="{'second-theme' : isSecondTheme}">
    <div class="mat-app-background">
        <router-outlet></router-outlet>
    </div>
</div>
这里isSecondTheme是布尔值，当应用true第二个主题时，否则为默认主题。只需在运行时更改布尔值即可。

您可以修改它以具有两个以上的主题。