多 css 选择器未应用样式

Question

我有一个 class，点击后样式不同。

我尝试将元素设置为：

<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 中可行吗？

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 选择器未应用样式

multi css selectors not applying style

nativescript