我有一堂课，当单击时，其样式有所不同。
我尝试将元素设置为：
<GridLayout (tap)="onHeaderClicked()" cssClass="table-header" [class.open]="isOpen"> </GridLayout>
但是，当尝试将样式应用于：
.table-header.open{
}
css没有得到应用，我现在不得不求助于以下语法并有2种方法：
<GridLayout (tap)="onHeaderClicked()" cssClass="{{isOpen ? 'table-header-open' : 'table-header-closed' }}">
并分别为这些样式创建样式
这可能在nativescript中吗？
如果要在运行时添加特定样式，可以使用ViewChild装饰器及其帮助来创建指向GridLayout的新属性。使用此属性，您可以将现有样式属性更改为此元素。
app.component.html
<GridLayout #container (tap)="onHeaderClicked()" rows="auto" columns="auto" width="200" height="300" cssClass="{{isOpen ? 'table-header-open' : 'table-header-closed'}}">
<Label row="0" col="0" text="sample text" textWrap="true"></Label>
</GridLayout>
app.component.ts
import {Component, ViewChild, ElementRef} from "@angular/core";
import {setTimeout} from "timer";
import {View} from "ui/core/view";
import {GridLayout} from "ui/layouts/grid-layout";
import {Color} from "color"
@Component({
selector: "my-app",
templateUrl: "app.component.html",
})
export class AppComponent {
public isOpen:boolean;
@ViewChild("container") container: ElementRef;
constructor(){
this.isOpen = true;
var that = this;
setTimeout(function() {
that.isOpen=false;
},3000);
}
public onHeaderClicked()
{
let container = <GridLayout>this.container.nativeElement;
container.color=new Color("blue");
}
}
app.css
.table-header-open{
background-color: red;
}
.table-header-closed{
background-color: green;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句