ng-class在Angular2中

32 浏览
0 Comments

ng-class在Angular2中

我正在开发一个基于Angular 2的测试应用程序，我在根据模型的列表添加类的问题上遇到了困难。

在Angular 1中，可以这样做：

// 模型

$scope.myClasses = ['class1', 'class2', ...];

// 视图

... ng-class="myClasses" ...

在Angular 2中，到目前为止我只能做到：

// 视图

... [class.class1]="true" [class.class2]="true" ...

这显然不够灵活，我相信肯定有更好的方法来实现这个。

然而，我也尝试过：

// 模型

class ... {

private myClasses: any;

constructor() {

this.myClasses = ['class1', 'class2', ...];

}

// 视图

... [class]="myClasses" ...

但是这样不起作用，我尝试过将myClasses作为单个类的字符串名称，字符串数组，具有类名键和true值的对象，以及这种类型的对象数组，但可惜的是，没有一种方法可以按照这种方式工作。

0

3 答案

0 Comments

在Angular2中，如果要使用ng-class指令，需要在组件的directives属性中指定CSSClass。下面是一段示例代码：

({
    selector: 'app',
})
({
    template: '<div [class]="classMap">Class Map</div>',
    directives: [CSSClass]
})
class App {
    constructor() {
        this.classMap = { 'class1': true, 'class2': false };
        setInterval(() => {
            this.classMap.class2 = !this.classMap.class2;
        }, 1000)
    }
}

在上述代码中，CSSClass指令没有在directives属性中指定，导致ng-class指令无法正常使用。为了解决这个问题，需要将CSSClass添加到directives属性中，如下所示：

({
  selector: 'app',
})
({
  directives: [CSSClass],
  template: `
    <div [ng-class]="classMap">Class Map</div>
  `,
})
class App { /* ... */ }

另外，从UPD可以看出，CSSClass指令已经改名为NgClass。此外，ng-class指令也被改为ngClass。在最新的beta.3版本中，可以直接使用[class]来实现相同的功能，而不需要指定指令。

总结起来，ng-class指令在Angular2中无法正常工作的原因是没有在directives属性中指定CSSClass指令。解决方法是将CSSClass或NgClass添加到directives属性中。另外，ng-class指令也可以改为ngClass或直接使用[class]来实现相同的功能。

0
0 Comments

在Angular2中，`ng-class`指令已经被废弃，因此无法在Angular2中直接使用。然而，可以使用其他方法来实现类似的效果。

一种解决方法是使用三元运算符和插值。在模板中，可以使用三元运算符将类条件设置为不同的类。例如：


    Conditional classes using Ternary Operator

在组件的TS文件中，可以设置类条件为`true`或`false`：

export class App {
  this.classCondition = false;
}

最终渲染的结果为：


    Conditional classes using Ternary Operator

希望这个解决方法能对其他人有所帮助。长时间以来，我一直在寻找和希望有这样的解决方案！

0
0 Comments

Angular 2中的ng-class问题是由于NgClass指令的使用方式引起的。根据NgClass的API文档，Angular 2可以接受一个字符串、一个数组或一个对象/映射作为NgClass的表达式，当然也可以指定一个返回其中之一的函数。

如果传递的是一个字面字符串，有两种可选的语法：

string of classes


string of classes

我认为第一种语法只是第二种语法的一种语法糖。

引用文档的话：

虽然NgClass指令可以解析计算结果为字符串、数组或对象的表达式，但基于对象的版本是最常用的，并且有一个优点，即可以将所有的CSS类名都保留在模板中。

解决方法：

根据NgClass的API文档，我们可以使用字符串、数组或对象/映射作为ngClass的表达式。如果传递的是一个字面字符串，可以使用`ngClass="..."`或`[ngClass]="'...'"`的语法。如果传递的是一个数组，可以使用`[ngClass]="['...', '...']"`的语法。如果传递的是一个对象/映射，可以使用`[ngClass]="{'...': true, '...': true}"`的语法。

在上面的代码示例中，我们可以看到这些不同的用法。例如，`ngClass="gray-border purple"`和`[ngClass]="'gray-border purple'"`都是表示传递一个字符串的方式。`[ngClass]="['gray-border', 'green']"`表示传递一个数组。`[ngClass]="{'gray-border': true, 'blue': true}"`表示传递一个对象/映射。

除了传递字符串、数组或对象/映射外，我们还可以使用一个返回这些类型之一的函数作为ngClass的表达式。

总之，ngClass在Angular 2中的使用方式有多种选择，可以根据不同的需求选择合适的方式来使用。

0