Question

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

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

这是我的app.components.ts

＆＃13;

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!");
}

＆＃13;

这是我的app.module.ts

＆＃13;

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 {}

＆＃13;

这是main.ts

＆＃13;

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

＆＃13;

我怎样才能使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为true或false，并在您的css文件中定义两个类为 -

.redColor {
color:red;
}

.defaultColor {
color:gray
}

和功能onTapMap() -

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

在NativeScript中更改标签样式onTap

1 个答案: