在 NativeScript 中更改标签样式

Question

我是NativeScript的新手，所以如果我问了一个愚蠢的问题，请原谅我。我试图用谷歌弄清楚几天了，但没有成功。

在应用程序的底部，我有一些带有图标字体的标签。所以我要做的是在单击时更改标签颜色。

截图

这是我的应用程序.组件.ts

import { Component } from "@angular/core";
import * as dockModule from "tns-core-modules/ui/layouts/dock-layout";
import { TNSFontIconService } from 'nativescript-ng2-fonticon';
import {topmost} from "ui/frame";   
import {Page} from "ui/page";
@Component({
  selector: "my-app",
  template: `
    <!-- <ActionBar title="Rupa GIS" class="action-bar" font-size= "7"></ActionBar> -->
    <ActionBar title="Rupa GIS" android.icon="res://icon" android.iconVisibility="always" class="action-bar" ></ActionBar>
    
    <!-- Your UI components go here -->
    
    <Page  class="pg">
    <DockLayout class="formMessag">
     <GridLayout class="formMessage1" columns="2*,2*,2*,2*" rows="" dock="bottom" verticalAlignment="bottom" class="mdi" >
     <Label class="mdi1" id="dd" [text]="'mdi-map' | fonticon" row="0" col="0"  (tap)="onTapMap()"   backgroundColor="transparent"  verticalAlignment="center"   horizontalAlignment="center" ></Label>     
     <Label class="mdi2" [text]="'mdi-camera' | fonticon" row="0" col="1" (tap)="onTapCam()" backgroundColor="transparent"  verticalAlignment="center"   horizontalAlignment="center"  ></Label>
     <Label class="mdi3" [text]="'mdi-info' | fonticon" row="0" col="2"  (tap)="onTapInfo()" backgroundColor="transparent"  verticalAlignment="center"   horizontalAlignment="center" ></Label>
     <Label class="mdi4" [text]="'mdi-settings' | fonticon" row="0" col="3" (tap)="onTapSett()"  backgroundColor="transparent"  verticalAlignment="center"   horizontalAlignment="center" ></Label>
     </GridLayout>
    </DockLayout> 
  </Page> 
 
  `
})
export class AppComponent  {
  // Your TypeScript logic goes here
 // var isSelected = "true";
  onTapMap(dd) {
   // boolean isSelected = true;
    let self = this;
    console.log("MAPA");
    
  }
  
  onTapCam() {
    console.log("KAMERA");
  }
  onTapInfo() {
    console.log("INFORMACIJE");
  }
  onTapSett() {
    console.log("PODESAVANJA");
  }
 
  constructor(private fonticon: TNSFontIconService, private page: Page) {
    page.actionBarHidden = true;
    
  }
  
}
export function pageLoaded() {
  console.log("DOBAR DAN!");
}

这是我的应用程序.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { TNSFontIconModule } from 'nativescript-ng2-fonticon';
import { AppComponent } from "./app.component";
@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [
    NativeScriptModule,
    TNSFontIconModule.forRoot({
      'mdi': 'material-design-icons.css'
    })
  ],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

这是主要的。

And here is the main.ts
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";
platformNativeScriptDynamic().bootstrapModule(AppModule);

如何使 onTapMap 函数更改标签的颜色？任何建议或指导将不胜感激。

谢谢！斯尔德扬

Answer 1

您可以根据点击事件应用类 -

<Label class="{{ checkYes ? 'redColor' : 'defaultColor'}}" id="dd" 
[text]="'mdi-map' | fonticon" row="0" col="0"  (tap)="onTapMap()"   
backgroundColor="transparent"  verticalAlignment="center" 
horizontalAlignment="center" ></Label>`   

在这里，我更改了 CSS 类 IMPL。

class="{{ checkYes ? 'redColor' : 'defaultColor'}}"

点击事件使此变量checkYes真或假，并在 CSS 文件中将两个类定义为 -

.redColor {
color:red;
}
.defaultColor {
color:gray
}

对于功能onTapMap() -

onTapMap() {
if(this.checkYes)
this.checkYes = false;
else
this.checkYes = true;
}