Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
最新版本的Angular中的[ngClass]和[class]绑定是否完全相同?ngClass是否提供了其他优势?_Angular_Frontend - Fatal编程技术网

最新版本的Angular中的[ngClass]和[class]绑定是否完全相同?ngClass是否提供了其他优势?

最新版本的Angular中的[ngClass]和[class]绑定是否完全相同?ngClass是否提供了其他优势?,angular,frontend,Angular,Frontend,我是Angular的新手,通过一个教程学习类绑定,该教程解释Angular 6中的概念 现在我已经基本清楚了如何使用ngClass指令以不同的方式绑定多个CSS类(即,通过使用键值对象、字符串或数组)。然而,我注意到,如果我使用[class]而不是[ngClass],我可以得到相同的结果,如下面的代码片段所示。我在系统中使用Angular11来练习这些概念 @Component({ selector: '[app-test]', template: ` <h2 [class

我是Angular的新手,通过一个教程学习类绑定,该教程解释Angular 6中的概念

现在我已经基本清楚了如何使用ngClass指令以不同的方式绑定多个CSS类(即,通过使用键值对象、字符串或数组)。然而,我注意到,如果我使用[class]而不是[ngClass],我可以得到相同的结果,如下面的代码片段所示。我在系统中使用Angular11来练习这些概念

@Component({
  selector: '[app-test]',
  template: `
    <h2 [class]="{'text-success': !hasError, 'text-danger': hasError, 'text-special': isSpecial}">Multi-class binding</h2>
    <h2 [ngClass]="{'text-success': !hasError, 'text-danger': hasError, 'text-special': isSpecial}">Multi-class binding</h2>
  `,
  styles: [`
        .text-success{
          color: green;
        }
        .text-danger{
          color: red;
        }
        .text-special{
          font-style: italic;
        }
  `]
})
export class TestComponent implements OnInit {
  hasError = true;
  isSpecial = true;
}
@组件({
选择器:“[应用程序测试]”,
模板:`
多类绑定
多类绑定
`,
风格:[`
.文本成功{
颜色:绿色;
}
.文字危险{
颜色:红色;
}
.特别文本{
字体:斜体;
}
`]
})
导出类TestComponent实现OnInit{
hasrerror=true;
isSpecial=正确;
}
我在这里讨论了其他类似的问题,但它们似乎是在回答基于旧版本的问题(例如:)

所以,我很想知道ngClass是否解决了除多类绑定之外的任何其他问题或提供了任何其他优势(我们只能通过[class]绑定实现)。或者,ngClass现在在Angular 11中是多余的吗