Angular 19的新特性详解：模型输入信号让 @Input() 和 @Output() 更简单

Angular 19 引入了一个强大的特性：简化了传统的 @Input() 和 @Output() 装饰器：模型输入信号 (Model Input signals)。这篇博客探讨了这一特性，展示它如何减少样板代码、增强响应性，并提高 Angular 应用程序的可读性。

看看我上传到 YouTube 的视频，我在视频里通过实际示例演示了这个功能，并且会把它和传统方法做一下对比。

传统上，Angular 组件用 @Input() 来接收数据，用 @Output() 来发出变更。虽然有效，但在管理双向绑定时这种方法可能会变得冗长。新的模型输入信号通过替换这些装饰器为单一的响应式模型，简化了这一过程，使父组件和子组件之间的互动更加直接和简单。

让我们先来回顾使用 @Input() 和 @Output() 装饰器的传统实现方式。

    import { Component, EventEmitter, Input, Output } from '@angular/core';  

    @Component({  
      selector: 'app-quantity',  
      template: `  
        <h3>数量</h3>  
        <button (click)="减少数量()">-</button>  
        <span> {{ quantity }} </span>  
        <button (click)="增加数量()">+</button>  
      `,  
    })  
    export class QuantityComponent {  
      @Input() quantity: number = 0;  
      @Output() quantityChange = new EventEmitter<number>();  

      public 增加数量(): void {  
        this.quantity = this.quantity + 1;  
        this.quantityChange.emit(this.quantity);  
      }  

      public 减少数量(): void {  
        if (this.quantity > 0) {  
          this.quantity = this.quantity - 1;  
          this.quantityChange.emit(this.quantity);  
        }  
      }  
    }

    @Component({  
      selector: 'app-root',  
      template: `  
        <h1>@Input() 和 @Output() 的传统用法</h1>  
        <h3>数量: {{ quantity }}</h3>  
        <app-quantity [(quantity)]="quantity"></app-quantity>  
      `,  
    })  
    export class AppComponent {  
      public quantity = 10;  
    }

这种方法虽然管用，但它需要管理 EventEmitter 实例，并显式地发出变更。现在，我们来看看 Model 输入信号是如何简化过程的。

Angular 19 中，新的 model() 函数用于创建数据绑定的信号，从而不再需要 @Input() 和 @Output()。

    import {  
      ChangeDetectionStrategy,  
      Component,  
      model  
    } from '@angular/core';  

    @Component({  
      selector: 'app-quantity',  
      template: `  
        <h3>数量</h3>  
        <button (click)="decrement()">-</button>  
        <span> {{ quantity() }} </span>  
        <button (click)="increment()">+</button>  
      `,  
      changeDetection: ChangeDetectionStrategy.OnPush,  
    })  
    export class QuantityComponent {  
      public quantity = 模型(0);  

      public increment(): void {  
        this.quantity.update((oldQuantity) => oldQuantity + 1); // 更新数量为旧数量加1
      }  

      public decrement(): void {  
        this.quantity.update((oldQuantity) => Math.max(0, oldQuantity - 1)); // 更新数量为旧数量减1，确保不小于0
      }  
    }

1. 简化冗余：

• 无需使用这两个 @Input() 和 @Output() 装饰器。
• 消除了对 EventEmitter 的管理，更加简洁。

2. 增强反应性：

• model() 函数为数据提供了一个响应式包装。
• 更新会随着 update() 自动触发。

3., 改善可读性：

• 代码更简洁易懂。
• 父组件和子组件之间的交互也更简单。

探索 Angular 19 的输入输出特性：简化输入和输出装饰器

Angular 19 引入了一个强大的功能，简化了传统的 @Input() 和 @Output() 装饰器的使用：模型输入信号，。本文将探讨这个功能，展示了它如何减少样板代码量，增强了响应性，并提高您的 Angular 应用程序的可读性。

按照传统，Angular 组件通过 @Input() 接收数据，并通过 @Output() 发出更改。虽然有效，但特别是在管理双向绑定时会显得冗长。新的模型输入信号机制通过用一个反应式模型替换这些装饰器，简化了这一过程，使父组件和子组件之间的交互更加直观。

让我们先来回顾一下使用 @Input() 和 @Output() 装饰器的传统做法。

    import { Component, EventEmitter, Input, Output } from '@angular/core';

    @Component({  
      selector: 'app-quantity',  
      template: `  
        <h3>数量</h3>  
        <button (click)="减()">-</button>  
        <span> {{ quantity }} </span>  
        <button (click)="加()">+</button>  
      `,  
    })  
    export class QuantityComponent {  
      @Input() quantity: number = 0;  
      @Output() quantityChange = new EventEmitter<number>();  
      public 增(): void {  
        this.quantity = this.quantity + 1;  
        this.quantityChange.emit(this.quantity);  
      }  
      public 减(): void {  
        if (this.quantity > 0) {  
          this.quantity = this.quantity - 1;  
          this.quantityChange.emit(this.quantity);  
        }  
      }  
    }

@Component({  
  selector: 'app-root',  
  template: `  
    <h1>@Input() 和 @Output() 的传统用法</h1>  
    <h3>当前数量: {{ quantity }}</h3>  
    <app-quantity [(quantity)]="quantity"></app-quantity>  
  `,  
})  
export class AppComponent {  
  public quantity = 10;  
}

虽然这种方法有效，但它需要管理 EventEmitter 实例并显式发出更改。接下来，我们来看看 Model 输入信号是如何简化这些步骤的。

在 Angular 19 版本中，新的 model() 函数用于创建数据绑定的绑定信号，从而不再需要 @Input() 和 @Output()。

    import {  
      ChangeDetectionStrategy,  
      Component,  
      模型  
    } from '@angular/core';

@Component({  
  selector: 'app-quantity',  
  template: `  
    <h3>数量</h3>  
    <button (click)="减量()">-</button>  
    <span> {{ quantity() }} </span>  
    <button (click)="增量()">+</button>  
  `,  
  changeDetection: ChangeDetectionStrategy.OnPush,  
})  
export class 数量组件 {  
  public 数量 = 模型(0);  
  public 增量(): void {  
    this.数量.更新(oldQuantity => oldQuantity + 1);  
  }  
  public 减量(): void {  
    this.数量.更新(oldQuantity => Math.max(0, oldQuantity - 1));  
  }  
}

导入 { 导入 } from '@angular/core';  
导入 { 组件 } from './quantity/quantity.component';

@Component({  
  selector: 'app-root',  
  imports: [QuantityComponent],  
  template: `  
    <h1>模型数据输入</h1>  
    <h3>{{ quantity }} 的数量</h3>  
    <app-quantity [(quantity)]="quantity"></app-quantity>  
    请在此输入数量  
  `,  
})  
export class AppComponent {  
  public quantity = 10;  
}

1. 减少冗余代码:

• 无需@Input() 和 @Output() 装饰器。
• 不再需要管理 EventEmitter。

二.增强的反应能力:

• model() 函数为值提供了一个反应式的包装层。
• 更新会自动通过 update() 传播。

3. 提升可读性

• 代码更简洁易懂。
• 父组件和子组件之间的互动更直接。

Angular 19的双向绑定输入信号是改变双向绑定游戏规则的关键。通过用反应式模型替换@Input()和@Output()装饰器，这种方式简化代码并提高响应性。今天就开始尝试，并体验它如何彻底改变你的Angular开发工作流程吧！

祝好喝！