Question

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

FlyoutItem

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

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

我想要这样的东西：

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

如何在自定义组件中获得颜色？

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

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

并尝试在组件中传递颜色

@Input() color;

但这对我没有用。

如何实现呢？

== UPDATE ==

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

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

链接到文件：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, })中，在页脚组件中输入了 primary 字符串。
如何从中获取颜色十六进制以设置页脚组件的背景色。请注意，原色会随着主题的变化而动态变化，因此，我无法对颜色进行硬编码。

Answer 1

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

我为页脚创建了一个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是一个布尔值，否则为默认主题。只需在运行时更改布尔值即可。

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

Answer 2

有点晚了，但也许其他人可以使用它。这是我如何做到的。我需要警告颜色，以便我可以在我自己的元素之一上使用它。

HTML：

 //This is a dummy element, invisible to the user.
 <mat-icon color="warn" [style.display]="'none'" #warnIconButton>home</mat-icon>

Ts：

 @ViewChild('warnIconButton') _warnIconButton: MatButton
 _warnColor:string = 'myFallbackColor'

 ngAfterViewInit() {
   const warnNativeElement = this._warnIconButton._elementRef?.nativeElement
   this._warnColor = getComputedStyle(warnNativeElement)?.color
 }

Answer 3

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

例如

color: string = 'primary'

HTML：

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

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

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

3 个答案: