Angular 2
घटक बातचीत

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

• <element [variableName]="value"></element> //Declaring input to child when using @Input() method.
• <element (childOutput)="parentFunction($event)"></element> //Declaring output from child when using @Output() method.
• @Output() pageNumberClicked = new EventEmitter(); //Used for sending output data from child component when using @Output() method.
• this.pageNumberClicked.emit(pageNum); //Used to trigger data output from child component. when using @Output() method.
• @ViewChild(ComponentClass) //Property decorator is required when using ViewChild.

पैरामीटर

अभिभावक - @ इंप्यूट और @ ऑप्यूट प्रॉपर्टी का उपयोग करके बाल बातचीत

हमारे पास एक DataListComponent है जो एक डेटा को दिखाता है जिसे हम किसी सेवा से खींचते हैं। DataListComponent में एक PagerComponent भी है क्योंकि यह बच्चा है।

PagerComponent, कुल पेजों की संख्या के आधार पर पेज नंबर सूची बनाता है, जो DataListComponent से प्राप्त होता है। PagerComponent भी DataListComponent को यह बताता है कि जब उपयोगकर्ता किसी पृष्ठ संख्या को आउटपुट गुण के माध्यम से क्लिक करता है।

import { Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataListService } from './dataList.service';
import { PagerComponent } from './pager.component';

@Component({
    selector: 'datalist',
    template: `
        <table>
        <tr *ngFor="let person of personsData">
            <td>{{person.name}}</td>
            <td>{{person.surname}}</td>
        </tr> 
        </table>

        <pager [pageCount]="pageCount" (pageNumberClicked)="pageChanged($event)"></pager>
    `
})
export class DataListComponent {
    private personsData = null;
    private pageCount: number;

    constructor(private dataListService: DataListService) { 
        var response = this.dataListService.getData(1); //Request first page from the service
        this.personsData = response.persons;
        this.pageCount = response.totalCount / 10;//We will show 10 records per page.
    }

    pageChanged(pageNumber: number){
        var response = this.dataListService.getData(pageNumber); //Request data from the service with new page number
        this.personsData = response.persons;
    }
}

@NgModule({
    imports: [CommonModule],
    exports: [],
    declarations: [DataListComponent, PagerComponent],
    providers: [DataListService],
})
export class DataListModule { }

PagerComponent सभी पृष्ठ संख्याओं को सूचीबद्ध करता है। हम उनमें से प्रत्येक पर क्लिक इवेंट सेट करते हैं ताकि हम अभिभावक को क्लिक की गई पेज संख्या के बारे में बता सकें।

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

@Component({
    selector: 'pager',
    template: `
    <div id="pager-wrapper">
        <span *ngFor="#page of pageCount" (click)="pageClicked(page)">{{page}}</span>
    </div>
    `
})
export class PagerComponent {
    @Input() pageCount: number;
    @Output() pageNumberClicked = new EventEmitter();
    constructor() { }

    pageClicked(pageNum){
        this.pageNumberClicked.emit(pageNum); //Send clicked page number as output
    }
}

अभिभावक - ViewChild का उपयोग करके बाल बातचीत

व्यूचाइल्ड माता-पिता से बच्चे तक बातचीत का एक तरीका प्रदान करता है। जब ViewChild का उपयोग किया जाता है तो बच्चे से कोई प्रतिक्रिया या आउटपुट नहीं होता है।

हमारे पास एक DataListComponent है जो कुछ जानकारी दिखाता है। DataListComponent में PagerComponent है क्योंकि यह बच्चा है। जब उपयोगकर्ता DataListComponent पर खोज करता है, तो उसे किसी सेवा से डेटा मिलता है और पेजरकंपोनेंट से नए पेजों के आधार पर पेजिंग लेआउट को ताज़ा करने के लिए कहता है।

import { Component, NgModule, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataListService } from './dataList.service';
import { PagerComponent } from './pager.component';

@Component({
    selector: 'datalist',
    template: `<input type='text' [(ngModel)]="searchText" />
               <button (click)="getData()">Search</button>
        <table>
        <tr *ngFor="let person of personsData">
            <td>{{person.name}}</td>
            <td>{{person.surname}}</td>
        </tr> 
        </table>

        <pager></pager>
    `
})
export class DataListComponent {
    private personsData = null;
    private searchText: string;

    @ViewChild(PagerComponent)
    private pagerComponent: PagerComponent;

    constructor(private dataListService: DataListService) {}
    
    getData(){
        var response = this.dataListService.getData(this.searchText);
        this.personsData = response.data;
        this.pagerComponent.setPaging(this.personsData / 10); //Show 10 records per page
    }
}

@NgModule({
    imports: [CommonModule],
    exports: [],
    declarations: [DataListComponent, PagerComponent],
    providers: [DataListService],
})
export class DataListModule { }

इस तरह आप चाइल्ड कंपोनेंट्स में परिभाषित फ़ंक्शन कह सकते हैं।

जब तक मूल घटक प्रदान नहीं किया जाता है तब तक बाल घटक उपलब्ध नहीं होता है। माता-पिता के बाद बच्चे के लिए उपयोग करने का प्रयास करने के AfterViewInit जीवन शैली के हुक से अपवाद हो जाएगा।

एक सेवा के माध्यम से द्विदिश माता-पिता की बातचीत

संचार के लिए उपयोग की जाने वाली सेवा:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ComponentCommunicationService {

    private componentChangeSource = new Subject();
    private newDateCreationSource = new Subject<Date>();

    componentChanged$ = this.componentChangeSource.asObservable();
    dateCreated$ = this.newDateCreationSource.asObservable();

    refresh() {
        this.componentChangeSource.next();
    }
    
    broadcastDate(date: Date) {
        this.newDateCreationSource.next(date);
    }
}

मूल घटक:

import { Component, Inject } from '@angular/core';
import { ComponentCommunicationService } from './component-refresh.service';

@Component({
    selector: 'parent',
    template: `
    <button (click)="refreshSubsribed()">Refresh</button>
    <h1>Last date from child received: {{lastDate}}</h1>
    <child-component></child-component>
    `
})
export class ParentComponent implements OnInit {

    lastDate: Date;
    constructor(private communicationService: ComponentCommunicationService) { }

    ngOnInit() {
        this.communicationService.dateCreated$.subscribe(newDate => {
            this.lastDate = newDate;
        });
    }

    refreshSubsribed() {
        this.communicationService.refresh();
    }
}

बाल घटक:

import { Component, OnInit, Inject } from '@angular/core';
import { ComponentCommunicationService } from './component-refresh.service';

@Component({
    selector: 'child-component',
    template: `
    <h1>Last refresh from parent: {{lastRefreshed}}</h1>
    <button (click)="sendNewDate()">Send new date</button>
    `
})
export class ChildComponent implements OnInit {

    lastRefreshed: Date;
    constructor(private communicationService: ComponentCommunicationService) { }

    ngOnInit() {
        this.communicationService.componentChanged$.subscribe(event => {
            this.onRefresh();
        });
    }

    sendNewDate() {
        this.communicationService.broadcastDate(new Date());
    }

    onRefresh() {
        this.lastRefreshed = new Date();
    }
}

AppModule:

@NgModule({
    declarations: [
        ParentComponent,
        ChildComponent
    ],
    providers: [ComponentCommunicationService],
    bootstrap: [AppComponent] // not included in the example
})
export class AppModule {}