Introduction à l'entrée et à la sortie en angulaire (avec code)

Cet article vous présente une introduction à l'entrée et à la sortie dans Angular (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Input est un décorateur de propriétés, utilisé pour définir les propriétés d'entrée au sein d'un composant. Dans les applications pratiques, nous l'utilisons principalement pour transférer des données des composants parents vers les composants enfants. Les applications angulaires sont composées de divers composants. Lorsque l'application est démarrée, Angular démarre à partir du composant racine et analyse l'intégralité de l'arborescence des composants, les données circulant de haut en bas jusqu'au niveau de sous-composants suivant.

@Input()

counter.component.ts
import { Component, Input } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    increment() {
        this.count++;
    }
    decrement() {
        this.count--;
    }
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <exe-counter [count]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

@Input('bindingPropertyName')

Prise en charge du décorateur d'entrée An paramètre facultatif qui spécifie le nom de la propriété de liaison du composant. S'il n'est pas spécifié, le décorateur @Input est utilisé par défaut et le nom de la propriété décorée est utilisé. Des exemples spécifiques sont les suivants :

counter.component.ts

import { Component, Input } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input(&#39;value&#39;) count: number = 0;
... // 其余代码未改变
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <exe-counter [value]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

setter & getter

setter et getter Ils sont utilisés pour limiter la définition et la récupération des attributs. Ils fournissent une certaine encapsulation de la lecture et de l'écriture des attributs, ce qui peut rendre le code plus pratique et évolutif. Grâce aux setters et aux getters, nous encapsulons les propriétés privées dans la classe pour empêcher les opérations externes d'affecter les propriétés privées. De plus, nous pouvons également encapsuler une certaine logique métier via des setters. Des exemples spécifiques sont les suivants :

counter.component.ts

import { Component, Input } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }} </p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    _count: number = 0; // 默认私有属性以下划线开头，不是必须也可以使用$count
    biggerThanTen: boolean = false;
    @Input()
    set count (num: number) {
        this.biggerThanTen = num > 10;
        this._count = num;
    }
    get count(): number {
        return this._count;
    }
    increment() {
        this.count++;
    }
    decrement() {
        this.count--;
    }
}

ngOnChanges

Quand la valeur de l'attribut d'entrée de liaison de données Lorsque des changements se produisent, Angular appellera activement la méthode ngOnChanges. Il obtiendra un objet SimpleChanges contenant les nouvelles et anciennes valeurs des propriétés liées. Il est principalement utilisé pour surveiller les modifications dans les propriétés d'entrée des composants. Des exemples spécifiques sont les suivants :

import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent implements OnChanges{
    @Input() count: number = 0;
    ngOnChanges(changes: SimpleChanges) {
        console.dir(changes[&#39;count&#39;]);
    }
    increment() {
        this.count++;
    }
    decrement() {
        this.count--;
    }
}

Il convient de noter dans l'exemple ci-dessus que lorsque la valeur de l'attribut d'entrée est modifiée manuellement, le hook ngOnChanges ne sera pas déclenché.

Output est un décorateur de propriétés utilisé pour définir les propriétés de sortie au sein d'un composant. Plus tôt, nous avons présenté le rôle du décorateur d'entrée et avons également appris que lorsque l'application démarre, Angular démarre à partir du composant racine et analyse l'intégralité de l'arborescence des composants, les données circulant de haut en bas jusqu'au niveau de sous-composants suivant. Le décorateur de sortie que nous avons présenté aujourd'hui est utilisé pour implémenter des composants enfants afin de notifier des informations aux composants parents sous la forme d'événements.

Avant de présenter le décorateur de propriété Output, commençons par présenter le héros derrière EventEmitter. Il est utilisé pour déclencher des événements personnalisés. Des exemples d'utilisation spécifiques sont les suivants :

let numberEmitter: EventEmitter<number> = new EventEmitter<number>(); 
numberEmitter.subscribe((value: number) => console.log(value));
numberEmitter.emit(10);

Le scénario d'application d'EventEmitter dans Angular est :

La sous-commande crée une instance EventEmitter et l'utilise. comme attribut de sortie Exporter. L'instruction enfant appelle la méthode submit(payload) dans l'instance EventEmitter créée pour déclencher un événement. L'instruction parent écoute l'événement via la liaison d'événement (eventName) et obtient l'objet payload via l'objet $event. Si cela vous semble un peu abstrait, mettons-le tout de suite en pratique.

@Output()

counter.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    @Output() change: EventEmitter<number> = new EventEmitter<number>();
    increment() {
        this.count++;
        this.change.emit(this.count);
    }
    decrement() {
        this.count--;
        this.change.emit(this.count);
    }
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>{{changeMsg}}</p> 
   <exe-counter [count]="initialCount" 
    (change)="countChange($event)"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
  changeMsg: string;
  countChange(event: number) {
    this.changeMsg = `子组件change事件已触发，当前值是: ${event}`;
  }
}

@Output('bindingPropertyName')

Prise en charge du décorateur de sortie An paramètre facultatif qui spécifie le nom de la propriété de liaison du composant. S'il n'est pas spécifié, le décorateur @Output est utilisé par défaut et le nom de la propriété décorée est utilisé. Des exemples spécifiques sont les suivants :

counter.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    @Output(&#39;countChange&#39;) change: EventEmitter<number> = new EventEmitter<number>();
... // 其余代码未改变
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>{{changeMsg}}</p> 
   <exe-counter [count]="initialCount" 
    (countChange)="countChange($event)"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
  changeMsg: string;
  countChange(event: number) {
    this.changeMsg = `子组件change事件已触发，当前值是: ${event}`;
  }
}

Deux -way Binding

Avant d'introduire la liaison bidirectionnelle, parlons d'abord d'une exigence : lorsque la valeur count du sous-composant CounterComponent change, la valeur de initialCount dans le composant parent AppComponent doit être mise à jour de manière synchrone. Grâce à l'exemple ci-dessus, nous savons que nous pouvons écouter l'événement change du sous-composant CounterComponent dans le composant parent AppComponent, puis mettre à jour la valeur de initialCount dans l'événement change. Des exemples spécifiques sont les suivants :

counter.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>子组件当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    @Output() change: EventEmitter<number> = new EventEmitter<number>();
    increment() {
        this.count++;
        this.change.emit(this.count);
    }
    decrement() {
        this.count--;
        this.change.emit(this.count);
    }
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>父组件当前值：{{ initialCount }}</p> 
   <exe-counter [count]="initialCount" 
    (change)="initialCount = $event"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

En fait, la liaison bidirectionnelle est composée de deux liaisons unidirectionnelles Composition :

Modèle-> Afficher la liaison de données

View-> Liaison d'événement de modèle

Angular [] implémente la liaison de données modèle-vue .() implémente la liaison d'événements de la vue au modèle. La combinaison des deux [()] permet d'obtenir une liaison bidirectionnelle. Également connu sous le nom de syntaxe banane dans la boîte.

[()] Exemple de syntaxe

counter.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'exe-counter',
    template: `
      <p>子组件当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;
    // 输出属性名称变更： change -> countChange
    @Output() countChange: EventEmitter<number> = new EventEmitter<number>();
    ... // 其余代码未改变
}

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>父组件当前值：{{ initialCount }}</p> 
   <exe-counter [(count)]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

Comme vous pouvez le voir d'en haut, [(modelName)] peut être divisé en deux parties modelName et modelNameChange, [modelName] est utilisé pour lier les propriétés d'entrée et (modelNameChange) est utilisé pour lier les propriétés de sortie. Lorsque Angular rencontre une syntaxe de liaison du formulaire [(modelName)] lors de l'analyse d'un modèle, il s'attend à ce qu'une propriété d'entrée nommée modelName et une propriété de sortie nommée modelNameChange soient présentes dans cette directive.

ngModel

Les lecteurs qui ont utilisé Angular 1.x doivent être familiers avec la directive ng-model, que nous utilisons pour réaliser une liaison bidirectionnelle de données. Alors, existe-t-il une instruction correspondante dans Angular ? La réponse est oui, c'est la directive ngModel.

Exemple de liaison bidirectionnelle ngModel

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  template: `
   <p>你输入的用户名是：{{ username }}</p> 
   <input type="text" [(ngModel)]="username" />
   `
})
export class AppComponent {
  username: string = &#39;&#39;;
}

Exemple de validation de formulaire ngModel

import { Component } from '@angular/core';
@Component({
  selector: 'exe-app',
  styles:[
    `.error { border: 1px solid red;}`
  ],
  template: `
   <p>你输入的用户名是：{{ username }}</p>
   <input type="text" 
      [(ngModel)]="username" 
      #nameModel="ngModel" 
      [ngClass]="{error: nameModel.invalid}"
      required/>
   {{nameModel.errors | json}}
   `
})
export class AppComponent {
  username: string = &#39;&#39;;
}

L'exemple ci-dessus utilise l'attribut exportAs dans les informations de métadonnées de la directive @Directive pour obtenir l'instance ngModel. Obtenez le statut du contrôle. Le statut du contrôle est classé comme suit :

valide - la valeur du formulaire est valide

vierge - la valeur du formulaire n'a pas changé

sale - la valeur du formulaire a changé

touché - le formulaire a été visité

intact - le formulaire n'a pas été consulté

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!