Angular旋转动画隐藏函数不起作用
创始人
2024-10-30 10:01:02
0

问题描述:

在Angular的应用程序中使用旋转动画(Spinner),可能会遇到一个问题,隐藏函数在调用时没有生效。

例如:

component.ts文件中:

showSpinner = false;

hideSpinner() {
   this.showSpinner = false;
}

component.html文件中:

在这种情况下,隐藏函数调用后,旋转动画仍然继续显示。

解决方案:

这个问题的解决方案是将旋转动画的显示和隐藏控制放到共享服务中。

例如:

loader.service.ts文件中:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
   providedIn: 'root'
})
export class LoaderService {
   public isLoading: BehaviorSubject = new BehaviorSubject(false);
   constructor() { }
   show() {
      this.isLoading.next(true);
   }
   hide() {
      this.isLoading.next(false);
   }
}

component.ts文件中:

import { Component } from '@angular/core';
import { LoaderService } from './loader.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private loaderService: LoaderService) {}
   showLoadingIndicator() {
      this.loaderService.show();
      setTimeout(() => {
         this.loaderService.hide();
      }, 3000);
   }
}

component.html文件中:


这个解决方案中,showLoadingIndicator函数调用show函数来显示旋转动画,并在3秒钟后调用hide函数来隐藏动画。

此外,在component.html文件中,使用Async管道订阅LoaderService的isLoading属性,根据其值来控制动画状态。

最后,应确保在AppModule中

相关内容

热门资讯

九玄学!同仁棋牌外挂(辅助挂)... 一、同仁棋牌外挂简介了解软件请加微:136704302同仁棋牌外挂是一款在线扑克游戏平台,玩家可以在...
八个测试!微扑克机器人代打(a... 八个测试!微扑克机器人代打(ai操作)辅助透视(有挂实锤)-哔哩哔哩关于微扑克机器人的基本介绍、功能...
七个机器人!德扑ai智能系统(... 七个机器人!德扑ai智能系统(刷数据)透视辅助(有挂实锤)-哔哩哔哩需要回顾用户提供的搜索结果,比如...
7最新款(wepoke数据)外... 1、7最新款(wepoke数据)外挂透明挂辅助脚本(辅助挂)2024新版(有挂头条)-哔哩哔哩;详细...
第八存在!闲来麻将挂(透视)太... 第八存在!闲来麻将挂(透视)太坑了其实真的有挂(新版有挂)-哔哩哔哩您好,闲来麻将挂,确实是有挂的,...
2个助手!德扑之星实战(胜率计... 1、2个助手!德扑之星实战(胜率计算软件)辅助透视(有挂总结)-哔哩哔哩。2、德扑之星实战透视辅助简...
两个软件!wpk辅助器是真的假... 两个软件!wpk辅助器是真的假的(微扑克辅助透视)其实真的有挂(新版有挂)-哔哩哔哩;亲们利用一分钟...
三私人局(aapoker)外挂... 1、三私人局(aapoker)外挂透明挂辅助机制(辅助挂)AI教程(有挂解惑)-哔哩哔哩。2、aap...
第7插件!金华佛手在线辅助软件... 第7插件!金华佛手在线辅助软件(辅助挂)太坑了原来真的有挂(有挂秘诀)-哔哩哔哩是一款可以让一直输的...
2个黑科技!wpk俱乐部系统(... 2个黑科技!wpk俱乐部系统(微扑克最新辅助)其实真的有挂(有挂方式)-哔哩哔哩相信很多朋友都在电脑...