在 NativeScript 中更改标签样式 onTap答案

【问题标题】：Change label style onTap in NativeScript在 NativeScript 中更改标签样式 onTap
【发布时间】：2017-10-20 08:02:27
【问题描述】：

我是 NativeScript 的新手，所以如果我问了一个愚蠢的问题，请原谅。我尝试使用谷歌数天来解决它，但没有成功。

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

Screenshot

这是我的 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!");
}

这是我的 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 {}

这里是 main.ts

And here is the main.ts

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

platformNativeScriptDynamic().bootstrapModule(AppModule);

我怎样才能让 onTapMap 函数改变标签的颜色？任何建议或指导将不胜感激。

谢谢！斯尔詹

【问题讨论】：

标签： android css angular2-nativescript

【解决方案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;
}

【讨论】：