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中

相关内容

热门资讯

8分钟方法!微信小程序雀神广东... 这是一款非常优秀的微信小程序雀神广东麻将助赢神器 ia辅助检测软件,能够让你了解到微信小程序雀神广东...
十分钟教学!广东雀神辅助工具,... 十分钟教学!广东雀神辅助工具,aapoker辅助软件(详细透视辅助软件教程);免费广东雀神辅助工具平...
八分钟了解!369互娱麻将,德... 八分钟了解!369互娱麻将,德扑之星的机制(详细透视辅助黑科技教程);一、369互娱麻将AI软件牌型...
1分钟黑科技!皇豪互娱牛牛有挂... 1分钟黑科技!皇豪互娱牛牛有挂吗,wepoke有玄学(详细透视辅助工具教程);免费皇豪互娱牛牛有挂吗...
六分钟黑科技!柳州天天爱麻将有... 六分钟黑科技!柳州天天爱麻将有挂吗,wepoke软件透明挂测试(详细透视辅助器教程);原来确实真的有...
八分钟透明!星悦广东麻将有挂么... 八分钟透明!星悦广东麻将有挂么,governorofpoker3有挂(详细透视辅助app教程)关于星...
八分钟攻略!欢聚水鱼有挂怎么开... 八分钟攻略!欢聚水鱼有挂怎么开,wpk微扑克真的(详细透视辅助app教程)是一款可以让一直输的玩家,...
十分钟黑科技!天胡麻将有挂吗,... 相信很多朋友都在电脑上玩过天胡麻将有挂吗吧,但是很多朋友都在抱怨用电脑玩起来不方便。为此小编给大家带...
9分钟介绍!欢喜广西麻将十三张... 1、9分钟介绍!欢喜广西麻将十三张有挂吗,微扑克wpk真的有辅助(详细透视辅助脚本教程)。2、欢喜广...
一分钟教程!边锋杭麻圈辅助,w... 一分钟教程!边锋杭麻圈辅助,wepower德州扑克(详细透视辅助工具教程);亲真的是有正版授权,小编...