Как обновить свойство (например, цвет) элемента HTML из Typescript

Question

У меня есть следующее в части HTML моей страницы

<ion-row padding>
    <ion-input [(ngModel)]="addressSearchfield" name="addressSearch'></ion-input>
</ion-row>

, и я хотел бы изменить цвет ионного входа в зелье TS страницы.

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

addressSearchfield: string;
//...
console.log (this.addressSearchfield);

Я предполагал, что могу ссылаться на элемент и его свойства, примерно так:

addressrow: any;
// ...
this.addressSearch.color = '#FFFFFF';

, но я получаюошибка Cannot set property 'color' of undefined

Как мне это сделать?

Answer 1

Более «ионный» способ сделать это - использовать свойства CSS .Как вы можете видеть в документах , у ion-input есть свойство CSS, которое устанавливает color:

CSS Custom Properties

Name    | Description
--------|------------------------
...
--color | Color of the input text
...

. Таким образом, вы можете определитьновое свойство CSS в файле variables.scss, например:

:root {

  // ...

  --input-custom-color: blue; // default color for the input

}

Затем на вашей странице установите цвет ввода, чтобы использовать это свойство CSS:

// my-page.page.scss

[name="addressSearch"] {
  --color: var(--input-custom-color);
}

Это будетпросто используйте цвет по умолчанию.Так что теперь следующий код должен изменить этот цвет (или фактически значение свойства CSS) из компонента:

// Angular
import { Component, Inject } from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

// Ionic
import { DomController } from '@ionic/angular';

@Component({
  selector: "app-my-page",
  templateUrl: "my-page.page.html",
  styleUrls: ["my-page.page.scss"]
})
export class MyPage {

  constructor(
    private domCtrl: DomController,
    @Inject(DOCUMENT) private document
  ) {}

  public changeColor(aColor: string): void {

    // Tell Ionic we're going to write in the DOM
    this.domCtrl.write(() => {

      // Update the value of the CSS property
      this.document.documentElement.style.setProperty('--input-custom-color', aColor);
    });
  }
}

Теперь вы можете сделать что-то вроде this.changeColor('green'); и цвет ввода будетмы обновили представление:)

Самым большим преимуществом этого является то, что вы можете изменить все свои входные данные, просто обновив это свойство CSS (даже входные данные, расположенные на любой другой странице вашего приложения) вместо прямого доступа ккаждый элемент DOM обновляет свои стили.

Обратите внимание, что выполнение того же самого будет работать для любых стилей - не имеет значения, использует ли Ionic свойство CSS, например --color, или это просто color CSS.атрибут (например: color: var(--input-custom-color);)

Answer 2

ОК, технически работает ответ Еретика Обезьяны,

document.querySelector('[name="addressSearch"]').style.color = '#FFFFFF';

но в редакторе это дает мне красную волнистость на элементе стиля

Однако, немного поэкспериментировав на этом:

addressSearch: HTMLElement;
// ...
this.addressSearch= document.querySelector('[name="addressSearch"]');
this.addressSearch.style.backgroundColor = '#FFFFFF';

дает тот же эффект, с более счастливым редактором.