Angular 2
Directives et composants: @Input @Output

Syntaxe

1. Liaison à sens unique du composant parent au composant imbriqué: [propertyName]
2. Liaison à sens unique d'un composant imbriqué au composant parent: (propertyName)
3. Liaison bidirectionnelle (notation de la boîte banane): [(propertyName)]

Exemple de saisie

@input est utile pour lier des données entre des composants

Tout d'abord, importez-le dans votre composant.

import { Input } from '@angular/core';

Ensuite, ajoutez l'entrée en tant que propriété de votre classe de composant

@Input() car: any;

Disons que le sélecteur de votre composant est 'car-component', lorsque vous appelez le composant, ajoutez l'attribut 'car'

<car-component [car]="car"></car-component>

Maintenant, votre voiture est accessible en tant qu'attribut dans votre objet (this.car)

Exemple complet:

1. car.entity.ts

    export class CarEntity {
       constructor(public brand : string, public color : string) {
       }  
    }

2. car.component.ts

    import { Component, Input } from '@angular/core';
    import {CarEntity} from "./car.entity";
    
    @Component({
        selector: 'car-component',
        template: require('./templates/car.html'),
    })
    
    export class CarComponent {
        @Input() car: CarEntity;
    
        constructor() {
            console.log('gros');
        }
    }

3. garage.component.ts

    import { Component } from '@angular/core';
    import {CarEntity} from "./car.entity";
    import {CarComponent} from "./car.component";
    
    @Component({
        selector: 'garage',
        template: require('./templates/garage.html'),
        directives: [CarComponent]
    })
    
    export class GarageComponent {
        public cars : Array<CarEntity>;
    
        constructor() {
            var carOne : CarEntity = new CarEntity('renault', 'blue');
            var carTwo : CarEntity = new CarEntity('fiat', 'green');
            var carThree : CarEntity = new CarEntity('citroen', 'yellow');
            this.cars = [carOne, carTwo, carThree];
        }
    }

4. garage.html

    <div *ngFor="let car of cars">
    <car-component [car]="car"></car-component>
    </div>

5. car.html

    <div>
        <span>{{ car.brand }}</span> |
        <span>{{ car.color }}</span>
    </div>

Angular2 @Input et @Output dans un composant imbriqué

Une directive Button qui accepte un @Input() pour spécifier une limite de clic jusqu'à ce que le bouton soit désactivé. Le composant parent peut écouter un événement qui sera émis lorsque la limite de clic est atteinte via @Output :

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

@Component({
    selector: 'limited-button',
    template: `<button (click)="onClick()" 
                       [disabled]="disabled">
                   <ng-content></ng-content>
               </button>`,
    directives: []
})

export class LimitedButton {
    @Input() clickLimit: number;
    @Output() limitReached: EventEmitter<number> = new EventEmitter();

    disabled: boolean = false;

    private clickCount: number = 0;

    onClick() {
        this.clickCount++;
        if (this.clickCount === this.clickLimit) {
            this.disabled = true;
            this.limitReached.emit(this.clickCount);
        }
    }
}

Composant parent qui utilise la directive Button et alerte un message lorsque la limite de clics est atteinte:

import { Component } from '@angular/core';
import { LimitedButton } from './limited-button.component';

@Component({
    selector: 'my-parent-component',
    template: `<limited-button [clickLimit]="2"
                               (limitReached)="onLimitReached($event)">
                   You can only click me twice
               </limited-button>`,
    directives: [LimitedButton]
})

export class MyParentComponent {
    onLimitReached(clickCount: number) {
        alert('Button disabled after ' + clickCount + ' clicks.');
    }
}

Angular2 @Input avec des données asynchrones

Parfois, vous devez extraire des données de manière asynchrone avant de les transmettre à un composant enfant à utiliser. Si le composant enfant tente d'utiliser les données avant leur réception, une erreur est générée. Vous pouvez utiliser ngOnChanges pour détecter les modifications apportées à la fonction @Input s d'un composant et attendre qu'ils soient définis avant d'agir sur eux.

Composant parent avec appel asynchrone à un noeud final

import { Component, OnChanges, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ChildComponent } from './child.component';

@Component ({
    selector : 'parent-component',
    template : `
        <child-component [data]="asyncData"></child-component>
    `
})
export class ParentComponent {
    
    asyncData : any;

    constructor(
        private _http : Http
    ){}

    ngOnInit () {
        this._http.get('some.url')
            .map(this.extractData)
            .subscribe(this.handleData)
            .catch(this.handleError);
    }

    extractData (res:Response) {
        let body = res.json();
        return body.data || { };
    }

    handleData (data:any) {
        this.asyncData = data;
    }

    handleError (error:any) {
        console.error(error);
    }
}

Composant enfant ayant des données asynchrones en entrée

Ce composant enfant prend les données asynchrones en entrée. Par conséquent, il doit attendre que les données existent avant de les utiliser. Nous utilisons ngOnChanges qui se déclenche à chaque fois que l'entrée d'un composant change, vérifie si les données existent et les utilise si c'est le cas. Notez que le modèle pour l'enfant ne s'affiche pas si une propriété qui repose sur les données transmises n'est pas vraie.

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

@Component ({
    selector : 'child-component',
    template : `
        <p *ngIf="doesDataExist">Hello child</p>
    `
})
export class ChildComponent {
    
    doesDataExist: boolean = false;

    @Input('data') data : any;

    // Runs whenever component @Inputs change
    ngOnChanges () {
        // Check if the data exists before using it
        if (this.data) {
            this.useData(data);
        {
    }

    // contrived example to assign data to reliesOnData    
    useData (data) {
        this.doesDataExist = true; 
    }
}