angular - 在 Angular 11 中,如何使插入符号有条件地旋转?
问题描述
我已经尝试了所有可以想象的东西。当 showNavDropdownDashboard 为真或假时,我需要旋转插入符号,此时无关紧要。我唯一一次让插入符号旋转是当我设置 transform="rotate-180-deg" 时,没有其他工作......
设置 rotate="90" 失败,因为“TS2322:类型 '"90"' 不可分配给类型 '90 | 180 | 270 | undefined'。”
使用 ngClass 失败,我从来没有看到分配的类...我尝试了我能找到的所有等效格式,它变得荒谬。
<div type="button" (click)="collapse.toggle()">
<fa-icon [icon]="caret"></fa-icon>
</div>
<div #collapse="ngbCollapse" [(ngbCollapse)]="!showNavTop">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" (click)="showNavDropdownDashboard = !showNavDropdownDashboard">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" [class.collapse]="!showNavDropdownDashboard">
<ul ngbNav class="navbar-nav">
<li ngbDropdown>
<div ngbNavLink ngbDropdownToggle>
linkies
</div>
<div ngbDropdownMenu class="dropdown-menu-dark">
<button ngbDropdownItem>- 1 Demo</button>
<button ngbDropdownItem>- 2 Demo</button>
<button ngbDropdownItem>+ New Dashboard</button>
</div>
</li>
</ul>
</div>
</nav>
</div>
班级
import { Component, OnInit } from '@angular/core';
import { faCaretUp } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-nav-top',
templateUrl: './nav-top.component.html',
styleUrls: ['./nav-top.component.css']
})
export class NavTopComponent implements OnInit {
caret = faCaretUp;
constructor() { }
public showNavDropdownDashboard = false;
public showNavTop = false;
ngOnInit(): void {
}
}
css
.transform-turn-0 {
transform:rotate(-0deg);
transition:all 0.3s ease-in-out; /*for smoothness*/
}
.transform-turn-180 {
transform:rotate(-180deg);
transition:all 0.3s ease-in-out; /*for smoothness*/
}
角版
Angular CLI: 11.2.5
Node: 15.11.0
OS: win32 x64
Angular: 11.2.6
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1102.5
@angular-devkit/build-angular 0.1102.5
@angular-devkit/core 11.2.5
@angular-devkit/schematics 11.2.5
@angular/cli 11.2.5
@schematics/angular 11.2.5
@schematics/update 0.1102.5
rxjs 6.6.6
typescript 4.1.5
解决方案
试试这个:
<fa-icon [icon]="caret" [rotate]="90"></fa-icon>
这种方法为我解决了这个问题。
不幸的是,我仍然主要是 TypeScript 和 Angular 的初学者,所以我无法自信地解释为什么会这样。我有同样的问题,我遇到了你的帖子寻找答案。也许知识渊博的 TypeScript/Angular 开发人员可以解释一下。
我怀疑它类似于:
rotate="90"
被视为正常的属性分配,因此值“90”是一个字符串。TypeScript 期望旋转为数字(90 或 180 或 270 或未定义)
[rotate]="90"
"" 中的值被视为 TypeScript 代码。值“90”被视为数字,TypeScript 很高兴一切都有效。
至于您的第二个要求,即只有在showNavDropdownDashboard === true
您可以利用属性分配中的 TypeScript 执行时才会发生旋转,例如
<fa-icon [icon]="caret" [rotate]="showNavDropdownDashboard === true ? 90 : undefined"></fa-icon>
推荐阅读
- php - PHP 中用于文本字段提交的安全 unicode 正则表达式
- c# - C#为什么当定时器调用绘图函数时我的图片框不移动?
- python - 如何使用 setup.py 从自托管位置在 zip 文件中安装 python 包?
- java - 在 spring rest Api 中启用 SSL (HTTPS)
- ajax - 使用 ajax 发送 >1 GB 数组缓冲区以制作字符串文件
- python - 比较两个数据框并替换列值
- events - CLI Dart:onPause、onResume、onDone 未按预期启动
- c# - 动态库 (System.Linq.Dynamic) SQL LIKE 运算符
- javascript - Owl-Carousel2 - 设置点数据
- odoo - 如何使用函数在树视图中创建字段?