创新互联Angular教程：Angular内置指令

This div is special

将 NgClass 与方法一起使用

1. 要将 ​NgClass ​与方法一起使用，请将方法添加到组件类中。在下面的示例中，​setCurrentClasses()​ 使用一个对象来设置属性 ​currentClasses​，该对象根据另外三个组件属性为 ​true ​或 ​false ​来添加或删除三个 CSS 类。

该对象的每个键（key）都是一个 CSS 类名。如果键为 ​true​，则 ​ngClass ​添加该类。如果键为 ​false​，则 ​ngClass ​删除该类。

currentClasses: Record = {};
/* . . . */
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

2. 在模板中，把 ​ngClass ​属性绑定到 ​currentClasses​，根据它来设置此元素的 CSS 类：

This div is initially saveable, unchanged, and special.

在这个例子中，Angular 会在初始化以及发生更改的情况下应用这些类。完整的示例会在 ngOnInit() 中进行初始化以及通过单击按钮更改相关属性时调用 setCurrentClasses()。这些步骤对于实现 ngClass 不是必需的。有关更多信息，请参见 现场演练 /  下载范例 中的 app.component.ts 和 app.component.html。

用 NgStyle 设置内联样式

可以用 ​NgStyle ​根据组件的状态同时设置多个内联样式。

1. 要使用 ​NgStyle​，请向组件类添加一个方法。

在下面的例子中，​setCurrentStyles()​ 方法基于该组件另外三个属性的状态，用一个定义了三个样式的对象设置了 ​currentStyles ​属性。

currentStyles: Record = {};
/* . . . */
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

2. 要设置元素的样式，请将 ​ngStyle ​属性绑定到 ​currentStyles​。

  This div is initially italic, normal weight, and extra large (24px).

在这个例子中，Angular 会在初始化以及发生更改的情况下应用这些类。完整的示例会在 ngOnInit() 中进行初始化以及通过单击按钮更改相关属性时调用 setCurrentClasses()。这些步骤对于实现 ngClass 不是必需的。有关更多信息，请参见 现场演练 /  下载范例 中的 app.component.ts 和 app.component.html。

用 ngModel 显示和更新属性

可以用 ​NgModel ​指令显示数据属性，并在用户进行更改时更新该属性。

1. 导入 ​FormsModule​，并将其添加到 NgModule 的 ​imports ​列表中。

import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
/* . . . */
@NgModule({
  /* . . . */

  imports: [
    BrowserModule,
    FormsModule // <--- import into the NgModule
  ],
  /* . . . */
})
export class AppModule { }

2. 在 HTML 的 ​
   ​ 元素上添加 ​[(ngModel)]​ 绑定，并将其设置为等于此属性，这里是 ​name​。

[(ngModel)]:

此 ​[(ngModel)]​ 语法只能设置数据绑定属性。

要自定义配置，你可以编写可展开的表单，该表单将属性绑定和事件绑定分开。使用属性绑定来设置属性，并使用事件绑定来响应更改。以下示例将 ​​ 值更改为大写：

这里是所有这些变体的动画，包括这个大写转换的版本：

NgModel 和值访问器

​NgModel ​指令适用于​ControlValueAccessor​支持的元素。Angular 为所有基本 HTML 表单元素提供了值访问器。

要将 ​[(ngModel)]​ 应用于非表单型内置元素或第三方自定义组件，必须编写一个值访问器。

编写 Angular 组件时，如果根据 Angular 的双向绑定语法命名 value 和 event 属性，则不需要用值访问器（ControlValueAccessor）或 ​NgModel​。

内置结构型指令

结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的结构，这通常是通过添加、移除和操纵它们所附加到的宿主元素来实现的。

本节会介绍最常见的内置结构型指令：

• ​NgIf ​—— 从模板中创建或销毁子视图。
• ​NgFor ​—— 为列表中的每个条目重复渲染一个节点。
• ​NgSwitch ​—— 一组在备用视图之间切换的指令。

用 NgIf 添加或删除元素

可以将 ​NgIf ​指令应用于宿主元素来添加或删除元素。

如果 ​NgIf ​为 ​false​，则 Angular 将从 DOM 中移除一个元素及其后代。然后，Angular 会销毁其组件，从而释放内存和资源。

要添加或删除元素，请在以下示例 ​*ngIf​ 绑定到条件表达式，例如 ​isActive​

当 ​isActive ​表达式返回真值时，​NgIf ​会把 ​ItemDetailComponent ​添加到 DOM 中。当表达式为假值时，​NgIf ​会从 DOM 中删除 ​ItemDetailComponent ​并销毁该组件及其所有子组件。

防止 null

默认情况下，​NgIf ​会阻止显示已绑定到空值的元素。

要使用 ​NgIf ​保护 ​

Hello, {{currentCustomer.name}}

Hello, {{nullCustomer}}

{{item.name}}

{{item.name}}

{{i + 1}} - {{item.name}}

  I turned the corner
  
    and saw {{hero.name}}. I waved
  
  and continued on my way.

 Are you as bright as {{currentItem.name}}?