如何在Angular 12中为组件设置样式

尼耳多
500 阅读4分钟

样式化你的组件是你的由前端驱动的应用程序的一个重要部分。Angular提供了NgStyle指令，帮助我们对特定的组件进行样式设计。当然，你可以设计单个或多个组件，但什么是NgStyle？让我们深入了解一下。

Angular NgStyle

Angular NgStyle是一个内置指令，可以让你设置特定DOM元素的样式属性。键是一个样式名称，而值是一个要评估的表达式。结果的非空值，以给定的单位表示，被分配给给定的样式属性。

它设置一个或多个样式属性，指定为冒号分隔的键值对。

一个属性指令，更新包含HTML元素的样式。如果评估结果为空，相应的样式将被删除。

如何使用Angular 12 NgStyle

我们将研究使用style属性为元素动态分配CSS样式的不同方法。但是，首先，让我们安装一个新的angular项目，并按照以下步骤进行操作。

如果你没有最新的Angular CLI，你需要更新Angular CLI。如需更多指导，请参阅本教程。现在，使用以下命令创建一个新项目：

ng new angulardata

现在，进入文件夹内，在Visual Studio Code中打开该文件夹。

接下来，使用以下命令安装Bootstrap 4 CSS 框架。你可以跳过安装bootstrap的步骤，因为我们在这里不需要太多的样式：

npm install bootstrap --save

现在，在angular.json 文件中加入bootstrap CSS 文件：

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

第1步：创建一个模型文件

在src >> app 文件夹内，创建一个名为Character.ts 的文件，并在其中添加以下代码：

// Character.ts

export default class Character {
    actor_name: String;
    character_name: String;
    gender: String;
    status: String;
}

我们将显示《权力的游戏》中的人物和他们的属性，如演员名、角色名、性别、地位等。

下一步是在app.component.ts 文件中创建一个数据数组：

// app.component.ts

import { Component } from '@angular/core';
import Character from './Character';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   characters: Character[] = [
    {
       actor_name: 'Peter Dinklage',
       character_name: 'Tyrion Lannister',
       gender: 'Male',
       status: 'Alive'
    },
    {
       actor_name: 'Sean Bean',
       character_name: 'Ned Stark',
       gender: 'Male',
       status: 'Dead'
    },
    {
       actor_name: 'Emilia Clark',
       character_name: 'Khaleesi',
       gender: 'Female',
       status: 'Alive'
    },
    {
       actor_name: 'Catelyn Stark',
       character_name: 'Michelle Fairley',
       gender: 'Female',
       status: 'Dead'
    }
  ];
}

第2步：创建一个HTML视图来显示Angular中的数据

最后一步是编写HTML代码来显示数据。

我们将首先以表格式显示数据。

在app.component.html 文件中写下以下代码：

<div class="container">
  <h4>NgStyle</h4>
  <div *ngFor="let celeb of characters">
     <p [ngStyle]="{'background-color':celeb.status === 'Dead' ? 'red' : 'green' }">
	{{ celeb.actor_name }} ({{ celeb.character_name }}) is {{celeb.gender}} character and {{celeb.status}}
     </p>
   </div>
</div>

我们在上面的代码中循环浏览了字符的 数据，并逐一显示数据。

我们使用了ngStyle 指令来为P元素分配样式。

我们已经分配了条件性的样式。例如，如果角色死亡，它将显示背景颜色为红色， 否则为绿色。 因此，我们使用Angular中的ngStyle 指令应用了条件性样式。

保存文件并在浏览器中看到输出：

Angular 7 NgStyle Tutorial With Example | Angular NgStyle当值是动态的时候，AngularngStyle变得更有帮助。例如，我们分配给ngStyle的对象字面中的值可以是javascript表达式，它被评估。然后，该表达式的结果被用作CSS属性的值。

我们可以使用ngStyle指令为HTML元素指定以下类型的样式。

将包含元素的字体设置为表达式的结果

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

将包含元素的宽度设置为一个表达式返回的像素值

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

使用一个返回键值对的表达式来设置一个样式值的集合

<some-element [ngStyle]="objExp">...</some-element>

在Angular中添加多个CSS样式

当给一个项目分配许多不同的样式时，语法会变得混乱和杂乱。这就是为什么在Angular中有一种使用ngStyle指令的不同方式来分配样式。

除了样式属性，ngStyle还接受一个包含样式名称及其值的对象。

请看下面的代码示例：

<div [ngStyle]="{'color': 'purple', margin: '11px', padding: '11px'}">
Millie Bobby Brown
</div>

绑定到Angular中的属性

绑定到属性，我们不需要对值进行单引号。

请看代码片断：

<div [ngStyle]="{'color': color}">
Millie Bobby Brown
</div>

在Angular中评估表达式

这就是用ngStyle评估表达式的工作方式：

<div [ngStyle]="{'color': data ? colorP : colorQ}">
Millie Bobby Brown
</div>

总结

本教程发现了我们如何使用ngStyle指令来使用Angular动态分配样式。

本教程就到此为止。

avatar
文章
阅读
粉丝