Question

我有一个课程，点击时的样式不同。

我试着把元素作为：

<GridLayout (tap)="onHeaderClicked()" cssClass="table-header" [class.open]="isOpen"> </GridLayout>

但是在尝试将样式应用于：

时

.table-header.open{

}

css没有得到应用，我现在不得不求助于以下语法并有两种方法：

<GridLayout (tap)="onHeaderClicked()"  cssClass="{{isOpen ? 'table-header-open' : 'table-header-closed' }}">

并为这些单独的

创建样式

这可能在nativescript中吗？

Answer 1

如果您想在运行时添加特定样式，可以使用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;
}

多css选择器不应用样式

1 个答案: