Угловой материал 2 динамических цвета темы - PullRequest
Новая
       6

Угловой материал 2 динамических цвета темы

0 голосов
/ 02 мая 2018

Мне нужно создать форму в моем приложении Angular 4, которое использует material2 и перезаписать выбранную тему (я импортировал одну, deeppurple-amber, потому что без темы некоторые компоненты не загружаются должным образом). Я видел, что могу определить свои собственные темы, используя файл scss, но мне нужно перезаписать основной цвет на цвет, определенный ранее пользователем и сохраненный в локальном хранилище

Итак, у меня есть это в ts моих компонентов: 

export class MyFormComponent implements OnInit {
    ...
    myPrimaryColor: string
    ...

    ngOnInit(){
        ...
        this.myPrimaryColor = localStorage.getItem('primarycolor');
        ...
    }
}

Есть ли способ вставить материал ввода и настроить в HTML-файле основной цвет, как этот? 

<mat-form-field *ngFor="let field of fields" [color]="#myPrimaryColor">
    <input matInput [placeholder]="field.text">
</mat-form-field>

Я искал документы по материалам, но не нашел ни ввода, ни атрибута поля формы для этого. Как я мог это сделать?

1 Ответ

0 голосов
/ 02 мая 2018

Параметр color не является свойством CSS - это директива Angular Material, которая принимает ThemePalette, который имеет значение 'primary', 'accent', 'warn' или undefined. Эти цвета привязаны к теме вашего приложения. Если вы хотите изменить стиль отдельного компонента на основе выбранного пользователем значения, вы можете сделать это с помощью ngStyle: 

<mat-form-field *ngFor="let field of fields" [ngStyle]="{'color': myPrimaryColor}">
    <input matInput [placeholder]="field.text">
</mat-form-field>
...