Question

考虑以下图标组件。为什么color变量仍然是单词颜色而不是插值？

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

@Component({
  moduleId: module.id,
  selector: 'nui-icon',
  template: `
    <i class="material-icons" 
       [ngClass]="{color: true, 'bordered': border}"
       [ngStyle]="{'font-size':size + 'px'}">
      <ng-content></ng-content>
    </i>
  `,
  styles: [`
    i {
      display: inline-flex;
    }
    i.bordered {
      border: 1px solid #d8d8d8;
      border-radius: 50%;
      padding: 15px;
    }
  `]
})

export class NuiIconComponent implements OnInit {
  @Input() color: string;
  @Input() size: string = '24';
  @Input() border: boolean = false;

  constructor () {}

  ngOnInit () {
  }
}

Answer 1

您可以传递字符串表达式，如：

[ngClass]="(border ? 'bordered ' : '') + color"

或对class

使用color绑定

[ngClass]="{ bordered: border }" [class]="color"

Answer 2

ngClass 接受三种类型的表达式

字符串表达式
数组表达式
Object Expressio n

您使用的是 对象表达 。在对象表达式中，键是在类中给出的表达式求值为truthy值时添加的CSS类，否则将删除它们。因此，密钥将始终被视为字符串，而不是表达式。

出于您的目的，您可以使用以下字符串表达式。

[ngClass]="color"

或

[class]="color"

参考：Angular ngClass API doc

ngClass插值不起作用

2 个答案: