在 angular 11 中，如何使插入符号有条件地旋转？

Question

我已经尝试了所有可以想象的方法。当 showNavDropdownDashboard 为 true 或 false 时，我需要插入符号旋转，目前无关紧要。我唯一一次让插入符旋转是在我设置 transform="rotate-180-deg" 时，其他都不起作用...

设置 rotate="90" 失败，因为“TS2322：类型‘90’无法分配给类型‘90 | 180 | 270 | undefined’。”

使用 ngClass 失败，我从来没有看到 class 分配...我尝试了我能找到的所有等效格式，它变得荒谬了。

<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>

class

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版本

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

Answer 1

试试这个：

<fa-icon [icon]="caret" [rotate]="90"></fa-icon>

这种方法解决了我的问题。

不幸的是，我仍然是 TypeScript 和 Angular 的初学者，所以我无法自信地解释为什么它有效。我遇到了同样的问题，我遇到了你的 post 寻找答案。也许更有见识的 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>

在 angular 11 中，如何使插入符号有条件地旋转？

In angular 11, how can you make a caret rotate conditionally?

rotation

caret

font-awesome

angular