Как получить доступ к цветам угловых материалов в компонентах? - PullRequest
Новая
       0

Как получить доступ к цветам угловых материалов в компонентах?

0 голосов
/ 28 октября 2019

В угловом материале мы можем передать цвета компонентам углового материала в качестве атрибута, например 

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

Я использую несколько тем углового материала, которые динамически меняются.

Обязательное поведение: Динамическое изменение цвета моих пользовательских компонентов с изменением темы.

Я хочу что-то вроде этого: 

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

Как получитьцвет в моем пользовательском компоненте?


То, что я пытался
У меня было свойство ввода в моем компоненте 

@Input() color;

и я пытался передать цвет в компоненте 

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

Но у меня это не сработало.

Как этого добиться?


== ОБНОВЛЕНИЕ ==

Объяснение: Ниже строки кода из файла button.ts углового материала из его githubрепозиторий 

/**
 * 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> я получил первичную строку в качестве входных данных для моего компонента нижнего колонтитула.
Как получить шестнадцатеричный цвет из этого, чтобы установить цвет фона моего компонента нижнего колонтитула. Обратите внимание, что основной цвет меняется динамически с изменением темы, поэтому я не могу жестко кодировать цвет.

Ответы [ 2 ]

1 голос
/ 30 октября 2019

Я нашел свое решение. Я публикую это здесь, так что если кому-то еще нужно подобное поведение в своем угловом приложении, он может получить его следующим образом.

Я создал миксин для нижнего колонтитула 

 @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является входом . Нам нужно передать значение цвета при встраивании компонента нижнего колонтитула следующим образом.
Для основного цвета фона: 

<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вторая тема применяется, в противном случае тема по умолчанию. Просто измените логическое значение во время выполнения.

Вы можете изменить его, чтобы иметь более двух тем.

0 голосов
/ 28 октября 2019

Вам необходимо установить свойство [color] для компонента Angular Material.

Например, 

color: string = 'primary'

HTML: 

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

Я создалминимальный пример для вашего здесь .

...