Javascript Angular（TypeScript）-如何在单击时更改文本的颜色

如何使用Angular（TypeScript）更改文本的颜色。我有一个按钮，当点击它改变了标题和主要部分的背景颜色。但我希望同样的按钮也能改变文本的颜色。当我单击时，我希望背景是红色，文本是白色

我将为这个问题补充一些信息

我在“data.service.ts”中对同一个按钮（即主部分）做了一些操作，以更改主部分的背景色：

import { BehaviorSubject } from 'rxjs';

export class DataService {


  private mensagemFonte = new BehaviorSubject <string> ('default value')
  actualMensagem = this.mensagemFonte.asObservable();

  constructor() { }


  alteraMensagem (mensagem: string) {

    this.mensagemFonte.next(mensagem)

  }

}

import { DataService } from '../../data.service';

export class HeaderComponent implements OnInit {


  DarkTheme: string;




  constructor(private data: DataService) { }

  ChangeColor(color: string) {


    this.data.alteraMensagem(color);



  }


  ngOnInit(): void {

    this.data.actualMensagem.subscribe(mensagem => this.DarkTheme = mensagem)


  }

}

<header>
  <nav class="navbar navbar-expand-lg navbar-light navbar-custom sticky-top" style="padding: 0;"
    [style.background]=DarkTheme>
    <div class="container" style="padding: 50;">
      <a class="navbar-brand text-center" href="#top" id="nav-icon">
        <img class="img-fluid" src="../../../assets/img/logo.svg" width="100" height="100" />
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav col-8">
          <li class="nav-item-1">
            <a class="nav-link" href="#main">AS MARAVILHAS</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#footer">CONTACTOS</a>
          </li>

        </ul>
        <ul class="navbar-nav col-4 sim">
          <li class="nav-item">
            <a class="nav-link" style="cursor: pointer;" (click)="ChangeColor ('red')">MODO ESCURO</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</header>

在“header.component.html”（在这里，我认为这个问题的重要代码部分是我有“[style.background]=DarkTheme”，你有“ChangeColor”，所以我有：

import { BehaviorSubject } from 'rxjs';

export class DataService {


  private mensagemFonte = new BehaviorSubject <string> ('default value')
  actualMensagem = this.mensagemFonte.asObservable();

  constructor() { }


  alteraMensagem (mensagem: string) {

    this.mensagemFonte.next(mensagem)

  }

}

import { DataService } from '../../data.service';

export class HeaderComponent implements OnInit {


  DarkTheme: string;




  constructor(private data: DataService) { }

  ChangeColor(color: string) {


    this.data.alteraMensagem(color);



  }


  ngOnInit(): void {

    this.data.actualMensagem.subscribe(mensagem => this.DarkTheme = mensagem)


  }

}

<header>
  <nav class="navbar navbar-expand-lg navbar-light navbar-custom sticky-top" style="padding: 0;"
    [style.background]=DarkTheme>
    <div class="container" style="padding: 50;">
      <a class="navbar-brand text-center" href="#top" id="nav-icon">
        <img class="img-fluid" src="../../../assets/img/logo.svg" width="100" height="100" />
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav col-8">
          <li class="nav-item-1">
            <a class="nav-link" href="#main">AS MARAVILHAS</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#footer">CONTACTOS</a>
          </li>

        </ul>
        <ul class="navbar-nav col-4 sim">
          <li class="nav-item">
            <a class="nav-link" style="cursor: pointer;" (click)="ChangeColor ('red')">MODO ESCURO</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</header>

莫多埃斯库罗

我希望这能有所帮助

您的文本

我希望这能有所帮助

---

您的文本

有一个标志，用于为块打开和关闭类。让该类控制所有要切换的系统

<div [ngClass]="{ yourStyle: yourToggleFlag }">Content to style with yourClass<div>
<button (click)="yourToggleFlag = !yourToggleFlag">Click</button>

与您的课堂风格相适应的内容
点击

有一个标志，用于为块打开和关闭类。让该类控制所有要切换的系统

<div [ngClass]="{ yourStyle: yourToggleFlag }">Content to style with yourClass<div>
<button (click)="yourToggleFlag = !yourToggleFlag">Click</button>

与您的课堂风格相适应的内容
点击

我编辑了我的问题，这样它可以帮助你更好地理解我编辑了我的问题，这样它可以帮助你更好地理解我编辑了我的问题，这样它可以帮助你更好地理解我的问题如果你能再次检查我的问题，看看你的答案是否不同，那将非常有用我编辑了我的问题，这样它可以帮助你理解我的问题泰瑞，如果你能再次检查我的问题，看看你的asnwer是否不同，那将非常有帮助