问题描述
我已经尝试了所有可以想象的方法。当 showNavDropdownDashboard 为真或假时,我需要插入符号旋转,目前无关紧要。我唯一一次让插入符号旋转是当我设置 transform="rotate-180-deg" 时,没有其他任何效果...
设置rotate="90" 失败,因为"TS2322: 类型'"90"' 不能分配给类型'90 | 180 | 270 | 未定义'。"
使用 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>