具有NgClass和NgStyle的Angular 2+类

In this blog post, we'll be learning about NgClass and NgStyle in Angular v2.x. Throughout this blog post, Angular means Angular version greater than 2.x unless stated otherwise.

在此博客文章中，我们将学习Angular v2.x中的NgClass和NgStyle 。 在本博客中，除非另有说明，否则A​​ngular表示Angular版本大于2.x。

For AngularJS v1.x styling, see our other article: The Many Ways To Use ngClass.

有关AngularJS v1.x样式的信息，请参见另一篇文章： ngClass的多种使用方法 。

Extra Reading: The Next Version of Angular is Angular v4

额外阅读： Angular的下一个版本是Angular v4

Creating dynamic styles in web applications can be a real pain. Luckily with Angular, we have multiple ways to create dynamic stylings to our application.

在Web应用程序中创建动态样式可能会非常麻烦。 幸运的是，有了Angular，我们有多种方法可以为我们的应用程序创建动态样式。

我们将建立什么 ( What We'll Build )

However, let us take a quick view of some of what we aim to achieve with ngStyle and ngClass.

但是，让我们快速了解一下我们打算通过ngStyle和ngClass实现的一些目标。

没有角度的样式 ( Styling Without Angular )

First of all, let us look at how we change the class and style of an element in pure JavaScript.

首先，让我们看一下如何更改纯JavaScript中元素的类和样式。

And for that, we would need to create a small div like the one below:

为此，我们需要创建一个类似于以下内容的小div：

<div id="my_id">This is a div written in black.</div>

To change the style of the above div and class in pure javascript, we would need to do this:

要在纯JavaScript中更改上述div和类的样式，我们需要执行以下操作：

var divToChange = document.getElemetById('my_id');

//to change the class we would do.
divToChange.className = "newclass";

//if we want to add multiple classes, we could just do
divToChange.className = "newclass secondclass thirldclass";

//if we want to add a class name without removing the class present before, we do:
divToChange.className = divToChange.className.concat(" addedwit");

//to change the background color of such an element, we would also have to do.
divToChange.style.background-color = "red";

//to change the color of such an element would need
divToChange.style.color = "white";

//Which we would agree is a bit more stressful than what angular ships with us.

If we look at the above code, we can notice that we had to first get element by id, then assessing its class name, before we start changing the values, them using compact, e.t.c.

如果我们看一下上面的代码，我们会注意到我们必须先通过id获取元素，然后评估其类名，然后再开始更改值，使用压缩等。

We would also notice that in some cases, we would need to reach property of property e.g divToChange.style.background-color before assigning a value to it.

我们还将注意到，在某些情况下，我们需要在为属性赋值之前，先达到divToChange.style.background-color等属性。

We would both agree that this can be a very tedious method of dealing with just styles and class names.

我们都同意，这可能是处理样式和类名的非常繁琐的方法。

Angular makes many parts of development easier including styling. Now, let's see how these are taken care of in Angular.

Angular使开发的许多部分（包括样式）更加容易。 现在，让我们看看如何在Angular中解决这些问题。

First of all, this tutorial believes that you know:

首先，本教程相信您知道：

1.) What Angular is? 2.) How to use the angular-cli

1.） Angular是什么？ 2.）如何使用angular-cli

Angular CLI入门 ( Getting Started With The Angular CLI )

In case you do not have the angular cli installed, you can run the following command.

如果未安装angular cli，则可以运行以下命令。

sudo npm install -g angular-cli

Extra Reading on Angular Cli Use the Angular CLI For Faster Angular 2 Projects

在Angular Cli上进行更多阅读使用Angular CLI进行更快的Angular 2项目

Once the angular cli has been installed, let us create a new project. so we run:

一旦安装了角度cli，就让我们创建一个新项目。 所以我们运行：

ng new angular-class-style

The above command creates a new project called angular-class-style.

上面的命令创建一个名为angular-class-style的新项目。

Once done, we change directory into our angular project and run ng serve.

完成后，我们将目录更改为我们的角度项目并运行ng serve。

# change directory into our app directory
cd angular-class-style

# serve the application
ng serve

We should see this:

我们应该看到：

Angular样式指令入门 ( Getting Started With Angular Style Directives )

Now let's get started with Style:

现在让我们开始使用样式：

In Angular, there are two methods of passing styles into elements.

在Angular中，有两种将样式传递到元素中的方法。

使用[style.property]绑定。 ( Using the [style.property] Binding. )

In the first instance, we can bind something like [style.color]='red'.

首先，我们可以绑定[style.color]='red' 。

This kind of styling would make the color of the element red. Similarly, we can also alter any style element that way by passing a string as the value. However, to be more dynamic, we can pass a dynamic style using a variable that exists in the component.

这种样式会使元素的颜色变为红色。 同样，我们也可以通过传递字符串作为值来更改任何样式元素。 但是，为了更加动态，我们可以使用组件中存在的变量传递动态样式。

Let's take this for example. Open up your src/app/app.component.ts file, we would replace it with the following content.

让我们以这个为例。 打开您的src/app/app.component.ts文件，我们将其替换为以下内容。

//import the angular component from angular core
import { Component } from '@angular/core';
@Component({
    // define the selector for your app
    selector: 'app-root',
    //pass in the template url
    templateUrl: './app.component.html',
    //pass in the css of the component
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';

    //set a property that holds a random color for our style.
    randomcolor = this.getRandomColor();

    //function to get random colors
    public getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++){
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    //function to set a new random color
    setColor() {
        this.randomcolor = this.getRandomColor();
    }
}

What we have done is very simple. We have set a property called randomcolor as a variable that holds the background color, and we have immediately set it to the value of our random generator function.

我们所做的非常简单。 我们已经将一个名为randomcolor的属性设置为保存背景色的变量，并且我们已将其立即设置为我们的随机数生成器函数的值。

Next, we defined a random generator function, that randomly generates colours by splitting letters and making sure it returns a color format like #ffffff

接下来，我们定义了一个随机生成器函数，该函数通过拆分字母并确保其返回诸如#ffffff的颜色格式来随机生成颜色

Then we defined a setcolor function that sets the variable to another randomly generated color.

然后，我们定义了setcolor函数，该函数将变量设置为另一种随机生成的颜色。

After Doing this, we should update our src/app/app.component.html to the following structure:

完成此操作后，我们应该将src / app / app.component.html更新为以下结构：

<h1>
{{title}}
</h1>
<!---style binding for colors -->
<h2>Style Binding using 'style.color' directive</h2>
<!--call the random color property to set the color of this div -->
<div [style.color]="randomcolor"> I would be styled with different colors dynamically </div>
<!--attach a click function to this button to set the color dynamically -->
<button (click)="setColor()"> Set my color </button>

Here, we have defined our HTML structure for the component.

在这里，我们为组件定义了HTML结构。

We have four main elements on the piece of code.

在代码段中，我们有四个主要元素。

The first one which prints out the value of value, The second, which is a header element, defining what we are doing.

第一个打印出value的值，第二个打印头，定义我们在做什么。

The third is the actual div in which we have attached a style binding to, While the fourth element, is the button, which has a click function that calls the setColor function from our component.

第三个是实际的div，在该div中我们附加了样式绑定，而第四个元素是按钮，该按钮具有click函数，该函数从组件中调用setColor函数。

If we close the page and compile, we should see something like this:

如果我们关闭页面并进行编译，则应该看到类似以下内容：

使用[ngStyle]绑定 ( Using the [ngStyle] Binding )

Another Method using style is to use the [ngStyle] property directly, which allows us to pass objects into it. for example [ngStyle]="{'color':'white', 'font-size':'17px'}" which also allows us to set those styles dynamically.

另一种使用样式的方法是直接使用[ngStyle]属性，该属性允许我们将对象传递到其中。 例如[ngStyle]="{'color':'white', 'font-size':'17px'}" ，这也允许我们动态设置这些样式。

Let's take a look at the following example, Update your src/app/app.component.ts to this:

让我们看下面的示例，将src/app/app.component.ts更新为此：

//import the angular component from angular core
import { Component } from '@angular/core';
@Component({
    // define the selector for your app
    selector: 'app-root',
    //pass in the template url
    templateUrl: './app.component.html',
    //pass in the css of the component
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';
    //set a property that holds a random color for our style.
    randomcolor=this.getRandomColor();
    //declare the fontsize and background color properties
    public font_size="12px";
    public background_color="grey ";
    //function to get random colors
    public getRandomColor(){
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++){
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    //function to set a new random color
    setColor(){
        this.randomcolor=this.getRandomColor();
    }
}

Now let's look at what has changed:

现在让我们看看发生了什么变化：

We added two properties into our app.component.ts file named font_size and background_color. These two properties are responsible for changing the style dynamically.

我们在app.component.ts文件中添加了两个属性，分别是font_size和background_color 。 这两个属性负责动态更改样式。

Currently, they are just properties holding default values, and nothing special happens with them.

当前，它们只是保存默认值的属性，它们没有发生任何特殊情况。

Now lets also update our src/app/app.component.html to this:

现在，我们还要将src/app/app.component.html更新为：

<h1>
{{title}}
</h1>
<!---style binding for colors -->
<h2>Style Binding using 'style.color' directive</h2>
<!--call the random color property to set the color of this div -->
<div [style.color]="randomcolor"> I would be styled with different colors dynamically </div>
<!--attach a click function to this button to set the color dynamically -->
<button (click)="setColor()"> Set my color </button>
<!---style bindning for ngStyle -->
<h2>Style Binding using 'ngStyle' directive</h2>
<!--call the style object to style class -->
<div [ngStyle]="{
'color': getRandomColor(),
'font-size': font_size,
'background-color': background_color
}"> I would be styled with different colors dynamically </div>
<!--attach a click function to this button to set the style dynamically -->
<input type="text" [(ngModel)]="background_color" placeholder="background_color">
<input type="text" [(ngModel)]="font_size" placeholder="font_size">

Let us take a brief look at what we added to the Html structure:

让我们看一下添加到Html结构中的内容：

We added some extra Html elements to the page. A new header tag, to specify what we are doing, a new div with our ngStyle binding, with an object passed to it.

我们在页面中添加了一些额外HTML元素。 一个新的标头标记（用于指定我们正在执行的操作），一个具有ngStyle绑定的新div， ngStyle其传递了一个对象。

One thing you might notice is that the object passed to it looks a lot like a CSS class.

您可能会注意到的一件事是，传递给它的对象看起来很像CSS类。

In fact, it is almost a CSS class, except that we pass in variables to it and also functions.

实际上，它几乎是一个CSS类，只是我们将变量和函数都传递给它。

Can you notice our getRandomColor function is being called here again to set the color. Not that it is compulsory, but rather than hard code the color, we decided to give it some spice.

您是否注意到我们的getRandomColor函数再次在这里被调用以设置颜色。 并不是说它是强制性的，而是我们决定给它加些香料，而不是对颜色进行硬编码。

We now have two new elements which are input buttons, with ngModel bindings to the variable declared in the style, for reactivity purposes.

现在，我们有两个新元素，即输入按钮，具有ngModel绑定到样式中声明的变量，以ngModel性目的。

After adding this files and compiling, your page should look like this:

添加此文件并进行编译后，您的页面应如下所示：

Now let's look at what has changed:

现在让我们看看发生了什么变化：

Although we set some default parameters, let's move into our app.component.html file to see what's there.

尽管我们设置了一些默认参数，但让我们进入app.component.html文件以查看其中的内容。

We added a new div which is bonded using ng style, and we then passed an object to it. The object consists of 3 properties which are style properties namely: color, background-color and font-size.

我们添加了一个新的使用ng样式绑定的div，然后将一个对象传递给它。 该对象包含3个属性，它们是样式属性，即： color ， background-color和font-size 。

The color attribute is set to a random color from our random color function, while both the background-color and font-size are preset.

color属性从我们的随机颜色函数设置为随机颜色，而background-color和font-size都是预设的。

Just after then, we find two inputs with ngModel binding to the font-size and color, which makes those fields reactive.

紧接着，我们找到了两个将ngModel绑定到font-size和color的输入，这使这些字段具有React性。

So if i were to type 18px to the font-size box, i get text of about 18px, vis-a-vis if i am to type in orange to the background-color box, i get a background color of orange.

因此，如果我要在字体大小框中键入18px，则得到大约18px的文本，而如果要在背景颜色框中键入橙色，则得到的背景颜色是橙色。

Angular类指令入门 ( Getting Started With Angular Class Directives )

Now let us move into using the class directives.

现在让我们进入使用class指令的过程。

使用[className]指令 (Using the [className] directive)

Let us start by using the [className] directive:

让我们从使用[className]指令开始：

Let us open up a file called src/app/app.component.css and add some css classes into it.

让我们打开一个名为src/app/app.component.css的文件， src/app/app.component.css其中添加一些CSS类。

.style1 {
    font-family: verdana;
    font-size: 20px;
}

.style2 {
    color: red;
    text-align: center;
}

What we have done here is to declare two classes, namely: style1 and style2 with different CSS properties. However, let's go on and see what we would use them for later on.

我们在这里所做的是声明两个类，即具有不同CSS属性的style1和style2 。 但是，让我们继续下去，看看以后将使用它们什么。

Now let us open up our src/app/app.component.html and replace it with the following content:

现在，让我们打开src/app/app.component.html并将其替换为以下内容：

<h1>
    {{title}}
</h1>

<!---style binding for colors -->
<h2>Style Binding using 'style.color' directive</h2>

<!--call the random color property to set the color of this div -->
<div [style.color]="randomcolor"> I would be styled with different colors dynamically </div>

<!--attach a click function to this button to set the color dynamically -->
<button (click)="setColor()"> Set my color </button>

<!---style binding for ngStyle -->
<h2>Style Binding using 'ngStyle' directive</h2>

<!--call the style object to style class -->
<div [ngStyle]="{
    'color': getRandomColor(),
    'font-size': font_size,
    'background-color': background_color
}"> I would be styled with different colors dynamically </div>

<!--attach a click function to this button to set the style dynamically -->
<input type="text" [(ngModel)]="background_color" placeholder="background_color">
<input type="text" [(ngModel)]="font_size" placeholder="font_size">

<!---class binding for ClassName -->
<h2>Class Binding using 'className' directive</h2>

<!--call the ngclass object to add a class name to it. -->
<div [className]="'style1'"> I would be classed using class name

If you notice, the font for the last text had changed.

如果您注意到，最后一个文本的字体已更改。

What have we done here?

我们在这里做了什么？

We have added some classes to our CSS files, and we have used the className directive to specify the class we want in our HTML.

我们已经在CSS文件中添加了一些类，并且已经使用className指令在HTML中指定所需的类。

This is how what we have would look at now:

这就是我们现在的样子：

Although this might not make sense as to why you would do this, as it is the same as doing class="style1" directly. But let us take a look at this example to see when using class name can be useful.

尽管这对于您为什么要这样做没有意义，因为这与直接执行class="style1"相同。 但是，让我们看一下这个示例，看看何时使用类名会很有用。

Open up your src/app/appcomponent.ts file and replace it with the following code:

打开您的src/app/appcomponent.ts文件，并将其替换为以下代码：

//import the angular component from angular core
import { Component } from '@angular/core';
@Component({
    // define the selector for your app
    selector: 'app-root',
    //pass in the template url
    templateUrl: './app.component.html',
    //pass in the css of the component
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';
    //set a property that holds a random color for our style.    
    randomcolor=this.getRandomColor();

    //declare the fontsize and background color properties
    public font_size="12px";
    public background_color="grey ";

    //declare a variable to hold class name:
    public my_Class = 'style1';

    //function to get random colors
    public getRandomColor(){
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++){
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    //function to set a new random color
    setColor(){
        this.randomcolor=this.getRandomColor();
    }

    //function to change the class from style1 to style 2 when clicked
    toggle_class(){
        if(this.my_Class=="style1"){
            this.my_Class='style2';
        }else{
            this.my_Class='style1';
        }
    }
}

If you look at the above code, we have only added one extra property, which is public my_Class='style1' which is just a holder for the class we are calling, and one extra method, for changing the class value of the my_class property, which basically just toggles the classes.

如果您看上面的代码，我们只添加了一个额外的属性，即public my_Class='style1' ，它只是我们正在调用的类的持有人，还有一个额外的方法，用于更改my_class属性的类值，这基本上只是切换类。

Now let's add the following Html code:

现在，让我们添加以下HTML代码：

<h1>
{{title}}
</h1>

<!---style binding for colors -->
<h2>Style Binding using 'style.color' directive</h2>

<!--call the random color property to set the color of this div -->
<div [style.color]="randomcolor"> I would be styled with different colors dynamically </div>

<!--attach a click function to this button to set the color dynamically -->
<button (click)="setColor()"> Set my color </button>

<!---style binding for ngStyle -->
<h2>Style Binding using 'ngStyle' directive</h2>

<!--call the style object to style class -->
<div [ngStyle]="{
    'color': getRandomColor(),
    'font-size': font_size,
    'background-color': background_color
}"> I would be styled with different colors dynamically </div>

<!--attach a click function to this button to set the style dynamically -->
<input type="text" [(ngModel)]="background_color" placeholder="background_color">
<input type="text" [(ngModel)]="font_size" placeholder="font_size">

<!---class binding for ClassName -->
<h2>Class Binding using 'className' directive</h2>

<!--call the ngclass object to add a class name to it. -->
<div [className]="'style1'"> I would be classed using classname

<!---class binding for ClassName -->
<h2>Class Binding using 'className' directive and variable</h2>

<!--call the ngclass object to add a class name to it. -->
<div [className]="my_Class"> I would be classed using classname</div>

<!--button to change the class -->
<button (click)="toggle_class()">Toggle_class</button>

If we click the button, we notice the classes are being swapped.

如果单击按钮，我们会注意到正在交换类。

So what have we done here?

那么我们在这里做了什么？

We have used the class name attribute to specify our class, which is being toggled using the button provided.

我们使用了类名属性来指定我们的类，可以使用提供的按钮对其进行切换。

使用ngClass绑定 ( Using the ngClass Binding )

Another class binding we can do is using the ngClass binding.

我们可以做的另一种类绑定是使用ngClass绑定。

We can use the ngclass to load classes dynamically too.

我们也可以使用ngclass动态加载类。

Just like the class name, we can load the classes either by string, by an array or even by objects.

就像类名一样，我们可以通过字符串，数组或对象来加载类。

The usage of object is the bigger advantage ngClass has over className

使用对象是ngClass相对于className的更大优势

e.g:

例如：

<div [ngClass]="['style1', 'style2']">array of classes
<div [ngClass]="'style1 style2'">string of classes
<div [ngClass]="{'style1': true, 'style2': true}">object of classes</div>

It should be noted that both the three methods in the example above, would give the same result.

应该注意的是，以上示例中的这三种方法将给出相同的结果。

But lets take a look at the third option that uses an object.

但是，让我们看一下使用对象的第三个选项。

We are allowed to pass an object to the ngClass directive. The object contains a key of all the styles we want to load and a boolean value of either true or false.

我们被允许将一个对象传递给ngClass指令。 该对象包含我们要加载的所有样式的键，以及boolean值true或false 。

Let's Take a look at the example below:

让我们看下面的例子：

Open up your src/app/appcomponent.ts and replace it with this content:

打开您的src/app/appcomponent.ts并将其替换为以下内容：

//import the angular component from angular core
import { Component } from '@angular/core';
@Component({
    // define the selector for your app
    selector: 'app-root',
    //pass in the template url
    templateUrl: './app.component.html',
    //pass in the css of the component
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';
    //set a property that holds a random color for our style.
    randomcolor=this.getRandomColor();
    //declare the fontsize and background color properties
    public font_size="12px";
    public background_color="grey ";
    //declare a variable to hold class name:
    public my_Class = 'style1';
    //variable to hold boolean value to style1
    isClass1Visible: false;
    //variable to hold boolean value to style2
    isClass2Visible: false;
    //function to get random colors
    public getRandomColor(){
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++){
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    //function to set a new random color
    setColor(){
        this.randomcolor=this.getRandomColor()
    }
    //function to change the class from style1 to style 2 when clicked
    toggle_class(){
        if(this.my_Class=="style1"){
            this.my_Class='style2';
        }else{
            this.my_Class='style1';
        }
    }
}

In the above code, we would notice the addition of two properties and two variables which are: isClass1Visible and isClass2Visible.

在上面的代码中，我们将注意到两个属性和两个变量的添加： isClass1Visible和isClass2Visible 。

The two properties hold the default boolean value for both style1 and style2.

这两个属性保留style1和style2的默认布尔值。

Now let's update our HTML structure to this:

现在让我们将HTML结构更新为：

<h1>
{{title}}
</h1>
<!---style binding for colors -->
<h2>Style Binding using 'style.color' directive</h2>

<!--call the random color property to set the color of this div -->
<div [style.color]="randomcolor"> I would be styled with different colors dynamically </div>

<!--attach a click function to this button to set the color dynamically -->
<button (click)="setColor()"> Set my color </button>

<!---style binding for ngStyle -->
<h2>Style Binding using 'ngStyle' directive</h2>

<!--call the style object to style class -->
<div [ngStyle]="{
    'color': getRandomColor(),
    'font-size': font_size,
    'background-color': background_color
}"> I would be styled with different colors dynamically </div>

<!--attach a click function to this button to set the style dynamically -->
<input type="text" [(ngModel)]="background_color" placeholder="background_color">
<input type="text" [(ngModel)]="font_size" placeholder="font_size">

<!---class binding for ClassName -->
<h2>Class Binding using 'className' directive</h2>

<!--call the ngclass object to add a class name to it. -->
<div [className]="'style1'"> I would be classed using classname</div>

<!---class binding for ClassName -->
<h2>Class Binding using 'className' directive and variable</h2>

<!--call the ngclass object to add a class name to it. -->
<div [className]="my_Class"> I would be classed using classname</div>
<button (click)="toggle_class()">Toggle_class</button>

<!-- class binding using ngclass -->
<h2> Class Binding using 'ngClass' directive with objects and variables</h2>

<!--call the classes in the objects and their value -->
<div [ngClass]="{'style1': isClass1Visible, 'style2': isClass2Visible}">object of classes</div>

<!--button to togggle style1 -->
<button (click)="isClass1Visible = !isClass1Visible;">Toggle style 1</button>

<!-- button to toggle style2 -->
<button (click)="isClass2Visible = !isClass2Visible;">Toggle style 2</button>

What have we added? we have added a div with the ngclass binding, and we have added our object of classes to them with a boolean value of false.

我们添加了什么？ 我们添加了一个带有ngclass绑定的div，并且为我们的类对象添加了布尔值false。

We also have two values that change the boolean value from false to true.

我们还有两个将布尔值从false更改为true的值。

So as we click, the classes change themselves.

因此，当我们单击时，类会自行更改。

Now this is what our page should look like:

现在，这是我们页面的外观：

I hope you now understand how easy it is to play around with ngStyle and ngClass to make your application more reactive.

我希望您现在了解使用ngStyle和ngClass使您的应用程序更具React性是多么容易。

With this approach, you wouldn't need jQuery to do things like toggle and tabs. And it is a much cleaner approach.

使用这种方法，您不需要jQuery即可执行切换和制表符之类的操作。 这是一种更清洁的方法。

翻译自: https://scotch.io/tutorials/angular-2-classes-with-ngclass-and-ngstyle