Angular 2
निर्देश और घटक: @Input @Output

वाक्य - विन्यास

1. मूल घटक से नेस्टेड घटक के लिए बाध्यकारी एक तरीका: [प्रॉपर्टीनेम]
2. नेस्टेड घटक से मूल घटक के लिए बाध्यकारी एक तरीका: (संपत्ति नाम)
3. दो-तरफ़ा बाइंडिंग (उर्फ बनाना बॉक्स नोटेशन): [(संपत्तिनाम)]

इनपुट उदाहरण

@input घटकों के बीच डेटा को बांधने के लिए उपयोगी है

सबसे पहले, इसे अपने घटक में आयात करें

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

फिर, इनपुट को अपने घटक वर्ग की संपत्ति के रूप में जोड़ें

@Input() car: any;

मान लें कि आपके घटक का चयनकर्ता 'कार-घटक' है, जब आप घटक को कॉल करते हैं, तो विशेषता 'कार' जोड़ें

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

अब आपकी कार आपके ऑब्जेक्ट में एक विशेषता के रूप में उपलब्ध है (यह.कार)

पूर्ण उदाहरण:

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 और @Output एक नेस्टेड घटक में

एक बटन निर्देश जो एक @Input() सीमा @Input() को स्वीकार करता है जब तक कि बटन अक्षम न हो जाए एक क्लिक सीमा निर्दिष्ट करें। मूल घटक एक घटना को सुन सकता है जो क्लिक की सीमा @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);
        }
    }
}

पैरेंट घटक जो बटन निर्देश का उपयोग करता है और एक संदेश को क्लिक सीमा तक पहुंचने पर अलर्ट करता है:

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

कभी-कभी आपको उपयोग करने के लिए चाइल्ड घटक को पास करने से पहले एसिंक्रोनस रूप से डेटा प्राप्त करने की आवश्यकता होती है। यदि बच्चा घटक प्राप्त होने से पहले डेटा का उपयोग करने की कोशिश करता है, तो वह एक त्रुटि फेंक देगा। आप उपयोग कर सकते हैं ngOnChanges एक घटक 'में परिवर्तन का पता लगाने के लिए @Input और इंतजार जब तक वे उन पर कार्रवाई करने से पहले परिभाषित कर रहे हैं।

एक समापन बिंदु पर async कॉल के साथ मूल घटक

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

चाइल्ड कंपोनेंट जिसमें इनपुट के रूप में async डेटा है

यह बाल घटक इनपुट के रूप में एसिंक्स डेटा लेता है। इसलिए इसका उपयोग करने से पहले डेटा के मौजूद होने का इंतजार करना चाहिए। हम ngOnChanges का उपयोग करते हैं जो कि जब भी किसी घटक के इनपुट में परिवर्तन होता है, तो जांच लें कि क्या डेटा मौजूद है और यदि वह इसका उपयोग करता है। ध्यान दें कि बच्चे के लिए टेम्प्लेट यह नहीं दिखाएगा कि कोई संपत्ति जो डेटा के पारित होने पर निर्भर करती है वह सच नहीं है।

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