Блог

Главная - Вопросы по программированию - Использование элемента ввода для изменения цвета шрифта заголовка при нажатии кнопки

Использование элемента ввода для изменения цвета шрифта заголовка при нажатии кнопки

#html #angular #typescript

#HTML #angular #typescript

Вопрос:

Я практикую Angular и хочу изменить цвет шрифта переменной с именем title, но я не могу разобраться в этом.

Смотрите tools.component.ts ниже:

   [...]
  title: string = 'Add note';
  titleColor: string = 'red';
  [...]
  setBackground() {this.title.fontcolor(this.titleColor)}

Итак, я подумал, что при нажатии кнопки, написанной на HTML, вызывается setBackground() метод, и цвет заголовка изменится. tools.component.html выглядит примерно так:

 <p>Title is {{title}}</p>
<input type="button" value="Set title color" ng-click="setBackground()"/>

Излишне говорить, что это не сработало.

Поэтому, что я должен делать вместо этого, чтобы при нажатии кнопки элемента ввода цвет переменной {{title}} менялся?

РЕДАКТИРОВАТЬ: Верно, это не заняло много времени, пока я не понял, как это сделать. Пожалуйста, также ознакомьтесь с этой правкой перед ответом.

Итак, в HTML я написал абзац, содержащий заголовок, следующим образом:

 <p [style.color]='titleColor'>{{title}}</p>
<button (click)="setBackground()">Set</button>

И метод в .ts теперь изменен на:

 setBackground() { this.titleColor = 'blue';}

И, конечно, это работает сейчас. Однако я хочу, чтобы кнопка была элементом, так как я могу добиться этого с ее помощью? Я пробовал так:

 <input type="button" value="Set title color" ng-click="setBackground()"/>

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

Комментарии:

1. title это не элемент заголовка, это просто строка. Где вы пользуетесь titleColor ?

2. Да, я говорю о строке, которая объявлена в файле .ts. Однако взгляните на редактирование, поскольку я понял, как правильно использовать titleColor .

3. Ну, с вашим редактированием это совершенно другой вопрос. Ваша первоначальная проблема была решена. Откуда вы получаете ng-click ? Вы просматриваете документы AngularJS и пытаетесь использовать их для проекта Angular? Не могли бы вы пояснить, что вы подразумеваете под «Я хочу, чтобы кнопка была элементом»? Кнопки — это элементы.

4. Что значит, вы хотите, чтобы кнопка была элементом?

Ответ №1:

Я думаю, вы путаете Angular с AngularJS. ng-click не будет привязываться ни к чему в Angular. Вам необходимо выполнить привязку к click событию кнопки:

 <input type="button" value="Set title color" (click)="setBackground()"/>

Кроме того, это не сработает:

 // Won't work because this.title is a string...
this.title.fontcolor

И, наконец, как вы вообще пытаетесь использовать titleColor ? Вам нужно привязать к нему цвет вашего элемента в DOM, а затем установить titleColor вместо title.fontColor :

 this.titleColor = 'blue';
...
<p [style.color]='titleColor'>{{title}}</p>

Вот рабочий пример на stackblitz.

Ответ №2:

создайте переменную titleColor следующим образом

 titleColor = 'red';

setBackground() {
   this.titleColor = 'blue';
}
Метки: