方括号如何确定angular中的class 2

Question

我刚刚在 ngx GitHub repo 上在线浏览了一个 Angular 4.0 组件，基本上只是 header 组件，如下所示：

<div class="header-container"
     [class.left]="position === 'normal'"
     [class.right]="position === 'inverse'">
  <div class="logo-containter">
    <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
    <div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
  </div>
  <ngx-theme-switcher></ngx-theme-switcher>
</div>

问题是我不太能理解 class 代码的工作方式，我看到下面的代码但不太能理解它：

[class.left]="position === 'normal'"
[class.right]="position === 'inverse'"

上面的代码究竟做了什么？

header 组件的打字稿文件如下所示：

import { Component, Input, OnInit } from '@angular/core';

import { NbMenuService, NbSidebarService } from '@nebular/theme';
import { UserService } from '../../../@core/data/users.service';
import { AnalyticsService } from '../../../@core/utils/analytics.service';

@Component({
  selector: 'ngx-header',
  styleUrls: ['./header.component.scss'],
  templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit {


  @Input() position = 'normal';

  user: any;

  userMenu = [{ title: 'Profile' }, { title: 'Log out' }];

  constructor(private sidebarService: NbSidebarService,
              private menuService: NbMenuService,
              private userService: UserService,
              private analyticsService: AnalyticsService) {
  }

  ngOnInit() {
    this.userService.getUsers()
      .subscribe((users: any) => this.user = users.nick);
  }

  toggleSidebar(): boolean {
    this.sidebarService.toggle(true, 'menu-sidebar');
    return false;
  }

  toggleSettings(): boolean {
    this.sidebarService.toggle(false, 'settings-sidebar');
    return false;
  }

  goToHome() {
    this.menuService.navigateHome();
  }

  startSearch() {
    this.analyticsService.trackEvent('startSearch');
  }
}

Answer 1

将条件 css class 应用于元素是简写语法。

[class.left]="position === 'normal'"

如果 position === 'normal' 的计算结果为 truthy，则将 css class left 应用于元素，否则不会应用 class.

参考Template syntax documentation。

这里还有语法 documentation from the cheat sheet

<div [class.extra-sparkle]="isDelightful">
Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful

方括号如何确定angular中的class 2

How do square brackets determine the class in angular 2

ngx-bootstrap

angular