Question

Angular强迫我在单引号中使用类名，即使我的css类名也没有任何超赞。这太奇怪了，我尝试了所有的东西，但似乎棱角分明，对于这个特定的css类而言，它已经被夸大了......很奇怪或者我做错了什么？

以下是我的html模板文件，

<div [ngClass]="'box'">
    <header [ngClass]="header">{{header}}</header>
    <ng-content [ngClass]="body"></ng-content>
       <footer [ngClass]="footer">{{footer}}</footer>
</div>

以下是我的css文件，

.box{

   border: 1px black solid;
   background-color:yellow;
}

.footer{

 background-color: green;

}

.header{

 background-color: green;
 text-align: center;

}

以下是组件文件

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

@Component({
  selector:'message-box',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.css']
  })
export class ErrorComponent {

    @Input() header:string = 'header from child';
    @Input() footer:string = 'footer from child';

}

Answer 1

如果您执行[ngClass]="box"，则会认为box是您组件的属性。这就是您需要[ngClass]="'box'"。

的原因

但是如果它不会改变，为什么要使用ngClass？

<div class="box">
    ...
</div>

仅供参考docs显示其中一个参数类型是字符串文字，就像你所做的那样。

在angular2中使用ngClass的奇怪问题

1 个答案: