Angular 2
Component interacties

Syntaxis

• <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.

parameters

Ouder - Kindinteractie met behulp van eigenschappen @Input & @Output

We hebben een DataListComponent die gegevens toont die we uit een service halen. DataListComponent heeft ook een PagerComponent omdat het kind is.

PagerComponent maakt een paginanummerlijst op basis van het totale aantal pagina's dat wordt opgehaald uit de DataListComponent. PagerComponent laat de DataListComponent ook weten wanneer de gebruiker op een paginanummer klikt via de eigenschap Output.

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 geeft alle paginanummers weer. We hebben voor elk van hen een klikgebeurtenis ingesteld, zodat we de ouder op de hoogte kunnen stellen van het geklikte paginanummer.

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

Ouder - Kindinteractie met ViewChild

Viewchild biedt eenrichtingsinteractie van ouder op kind. Er is geen feedback of output van child wanneer ViewChild wordt gebruikt.

We hebben een DataListComponent die wat informatie toont. DataListComponent heeft PagerComponent als kind. Wanneer de gebruiker een zoekopdracht uitvoert op DataListComponent, ontvangt deze gegevens van een service en vraagt PagerComponent de paginalay-out te vernieuwen op basis van het nieuwe aantal pagina's.

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

Op deze manier kunt u functies oproepen die bij onderliggende componenten zijn gedefinieerd.

Onderliggend onderdeel is niet beschikbaar totdat bovenliggend onderdeel is weergegeven. Proberen toegang te krijgen tot het kind voor ouders AfterViewInit life cyle hook zal een uitzondering veroorzaken.

Bidirectionele ouder-kind interactie via een dienst

Service die wordt gebruikt voor communicatie:

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

Bovenliggend onderdeel:

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

Onderliggend onderdeel:

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