Changer le style de l'étiquette onTap in NativeScript

Question

Je suis nouveau à NativeScript alors s'il vous plaît excusez-moi si je pose une question stupide. J'ai essayé de le comprendre en utilisant google pendant des jours maintenant mais n'a eu aucun succès.

Au bas de l'application, j'ai des étiquettes avec une police d'icônes. Donc, ce que je veux faire est de changer la couleur de l'étiquette lorsque l'on clique dessus.

Screenshot

Voici mes app.components.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!"); 
 
}

Et voici mon app.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 {}

Et voici le main.ts

And here is the main.ts 
 

 
import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 
 
import { AppModule } from "./app.module"; 
 

 
platformNativeScriptDynamic().bootstrapModule(AppModule);

Comment pourrais-je faire en sorte que la fonction onTapMap change la couleur d'une étiquette? Tout conseil ou conseil serait grandement apprécié.

Merci! Srdjan

Answer 1

Vous pouvez appliquer la classe en fonction des événements de claquettes -

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

ici j'ai changé la impl de classe css. -

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

sur l'événement du robinet font cette variable checkYes vrai ou faux et dans votre fichier CSS définir deux classes comme -

.redColor { 
color:red; 
} 

.defaultColor { 
color:gray 
} 

et pour la fonction onTapMap() -

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