Angular 2
Richtlinien und Komponenten: @Input @Output

Syntax

1. Einwegbindung von der übergeordneten Komponente an die verschachtelte Komponente: [Eigenschaftsname]
2. Einwegbindung von verschachtelten Komponenten an übergeordnete Komponenten: (propertyName)
3. Zweiwege-Bindung (auch bekannt als Bananenbox): [(propertyName)]

Eingabebeispiel

@input ist nützlich, um Daten zwischen Komponenten zu binden

Importieren Sie es zuerst in Ihre Komponente

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

Fügen Sie dann die Eingabe als Eigenschaft Ihrer Komponentenklasse hinzu

@Input() car: any;

Nehmen wir an, der Selektor Ihrer Komponente ist 'car-component'. Fügen Sie beim Aufruf der Komponente das Attribut 'car'

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

Jetzt ist Ihr Auto als Attribut in Ihrem Objekt (this.car) verfügbar.

Vollständiges Beispiel:

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 und @Output in einer verschachtelten Komponente

Eine Button-Direktive, die ein @Input() akzeptiert, um ein @Input() festzulegen, bis die Schaltfläche deaktiviert wird. Die übergeordnete Komponente kann ein Ereignis abhören, das bei Erreichen des @Output über @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);
        }
    }
}

Übergeordnete Komponente, die die Button-Direktive verwendet und eine Benachrichtigung ausgibt, wenn das Klicklimit erreicht ist:

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 mit asynchronen Daten

Manchmal müssen Sie Daten asynchron abrufen, bevor Sie sie an eine zu verwendende untergeordnete Komponente übergeben. Wenn die untergeordnete Komponente versucht, die Daten zu verwenden, bevor sie empfangen wurden, wird ein Fehler ausgegeben. Sie können ngOnChanges , um Änderungen in den @Input Komponenten zu erkennen und zu warten, bis sie definiert sind, bevor Sie darauf @Input .

Übergeordnete Komponente mit asynchronem Aufruf an einen Endpunkt

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);
    }
}

Untergeordnete Komponente mit asynchronen Daten als Eingabe

Diese untergeordnete Komponente übernimmt die asynchronen Daten als Eingabe. Daher muss es warten, bis die Daten vorhanden sind, bevor sie verwendet werden. Wir verwenden ngOnChanges, das immer dann ausgelöst wird, wenn sich die Eingabe einer Komponente ändert. Überprüfen Sie, ob die Daten vorhanden sind, und verwenden Sie sie, falls dies der Fall ist. Beachten Sie, dass die Vorlage für das untergeordnete Element nicht angezeigt wird, wenn eine Eigenschaft, die von den übergebenen Daten abhängig ist, nicht true ist.

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; 
    }
}