5个常用的简单的angular事件

最新推荐文章于 2024-11-27 19:01:14 发布

orange_cccc

最新推荐文章于 2024-11-27 19:01:14 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/orange_cccc/article/details/82664451

本文介绍Angular框架中的动画实现方法及元素交互控制技巧，包括点击旋转动画、内容展开、双击事件处理、选中变色及取消等效果，并提供改变控件样式的多种方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.点击旋转动画

html:[ngClass]="{'close':aaa,'open':!aaa}" 
     (click)="aaa=!aaa"
css:.close{transform:rotate(0deg);transition:transform 0.5s;}
ts: aaa=false;

2.点击展开内容

html: (click)="open()"
      *ngIf = "isShow"
ts:  isShow = false;//先隐藏
     open(){this.isShow = !this.isShow;}//点击控制

3.双点击事件
(click) = “open();iClose = !iClose”//直接用；符号隔开
4.选中变色，点击页面其他地方则取消变色

html:  [class.selected]="item === selectedItem"
       (click) = "onSelect(item)"
ts:   item;
      selectedItem:any;
      onSelect(item:any):void{
           this.selectedItem = item;
            document.addEventListener(
            'click',
            function() {
                this.selectedItem = null;
            }.bind(this),
            true
        );
      }
css: .selected{
 color:blue;
 }

5.改变angular控件样式（4种可以依次尝试，总有一个有用）

::ng-deep .ant-spin-dot i {
  background-color: #4c7bff;
}

:host ::ng-deep .ant-spin-dot i {
  background-color: #4c7bff;
}

:root .ant-select-dropdown {
   margin-top: 16px;
}

:host /deep/ .ant-spin-dot i {
  background-color: #4c7bff;
}