从打字稿调用 CSS 样式将其附加到 html 文件 [英] Calling the CSS style from typescript append it to html file

问题描述

在TS文件中调用的按钮点击功能CSS样式

html 代码:

 
<div *ngIf="isLoading" class="loader"></div><p *ngIf="results">{{ 结果 |json }}</p><p *ngIf="error">错误:{{ 错误 |json }}</p>
<p><button (click)="getResult()">获取结果</button></p>

我尝试过的链接:https://stackblitz.com/edit/angular-loader-kspfhg?ctl=1&embed=1&file=app/app.component.html&view=editor点击按钮后，overlay-loader css 类被加载，一旦数据被获取，css overlay-loader 就会消失

解决方案

使用 ngClass 有条件地添加一个类:

On button click function CSS style to be called with in the TS file

html code:

    <div class="overlay-loader">
    <div *ngIf="isLoading" class="loader"></div>
    <p *ngIf="results">{{ results | json }}</p>
    <p *ngIf="error">Error: {{ error | json }}</p>
    </div>
    <p>
    <button (click)="getResult()">Get result</button>
    </p>

Link which i have tried:https://stackblitz.com/edit/angular-loader-kspfhg?ctl=1&embed=1&file=app/app.component.html&view=editor After clicking the button overlay-loader css class to be loaded and once data get fetched css overlay-loader to be dissaper

解决方案

Use ngClass to add a class conditionally:

<div [ngClass]="{'overlay-loader': isLoading}">

这篇关于从打字稿调用 CSS 样式将其附加到 html 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！