时间戳

首页 > 解决方案 > 如何访问组件中的 Angular 材质颜色？

angular - 如何访问组件中的 Angular 材质颜色？

问题描述

在角度材质中，我们可以将颜色作为属性传递给角度材质组件，例如

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

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

必需的行为： 随着主题的变化动态地改变我的自定义组件的颜色。

我想要这样的东西：

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

如何在我的自定义组件中获取颜色？


我试过
的我的组件中有一个输入属性

@Input() color;

并试图在组件中传递颜色

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

但这对我没有用。

如何做到这一点？


==更新==

说明：以下代码行来自其 github 存储库中的 angular 材料的 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>我在页脚组件中获得了主字符串作为输入。
如何从中获取颜色十六进制以设置我的页脚组件的背景颜色。请注意，原色会随着主题的变化而动态变化，因此，我不能对颜色进行硬编码。

标签： angularangular-material

解决方案

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

我为页脚创建了一个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-primary {
              background-color: mat-color($primary);
          }
         .footer-accent {
              background-color: mat-color($accent);
          }
        }
      }

app-footer是一个组件选择器，.footer-*是一类页脚组件，我想对其应用主要/强调背景颜色。

在页脚组件中，color是一个input。我们需要通过以下方式在嵌入页脚组件时传递颜色值。
对于主要背景颜色： 

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

对于强调背景颜色： 

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

在页脚 HTML 文件中：

<div [ngClass]="{'footer-primary': color === 'primary', 'footer-accent': color === 'accent'}">
      /*footer code here...*/
</div>

然后我在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应用第二个主题时，否则为默认主题。只需在运行时更改布尔值。

您可以将其修改为具有两个以上的主题。

推荐阅读