Datenübergabe zwischen Komponenten in Angular 2

1. Verwenden Sie Input Decorator, um Daten von übergeordneten an untergeordnete Komponenten in Angular 2 zu übergeben
2. Verwenden Sie den Output und EventEmitter, um Daten von untergeordneten an übergeordnete Komponenten in Angular 2 zu übergeben
3. Verwenden Sie den Dienst, um Daten zwischen Komponenten in Angular 2 zu übergeben

Dieser Artikel zeigt Ihnen, wie Sie Daten zwischen zwei Komponenten in Angular 2 übertragen.

Verwenden Sie Input Decorator, um Daten von übergeordneten an untergeordnete Komponenten in Angular 2 zu übergeben

Parent to Child via Input() Decorator wird verwendet, wenn eine Elternkomponente mit ihrer Kindkomponente kommunizieren muss. Die übergeordnete Komponente sendet Daten oder führt Aktionen an der untergeordneten Komponente aus.

Es funktioniert, indem Daten über die Vorlage mit dem Decorator @Input() bereitgestellt werden. Dies wird verwendet, um die Eingabeeinstellungen der Komponente zu ändern und zu verfolgen.

Die folgenden Codebeispiele zeigen, wie Sie diese Art von Beziehung zwischen zwei Komponenten mithilfe des Eingabe-Decorators in Angular 2 erstellen.

TypeScript-Code (App.component.ts):

import { Component } from '@angular/core';
import { Demo } from './Demo';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    DemoEx:Demo[] = [
        new Demo('First Example'),
        new Demo('SECOND Example')
    ];
}

TypeScript-Code (input.component.ts):

import { Component, OnInit, Input} from '@angular/core';
import { Demo } from '../Demo';
@Component({
    selector: 'app-demo',
    templateUrl: './input.component.html',
    styleUrls: ['./input.component.css']
})
export class inputCom implements OnInit {
    @Input() Demo: Demo;
    constructor() { }
    ngOnInit() {
    }
}

HTML-Code (app.component.html und input.component.html):

<main>
<section>
    <div class="card">
        <header>{{Demo.name}}</header>  
    </div>
</section>
</main>
<h3>Parent to child Component Interaction in Angular</h3>
<app-demo *ngFor="let Demo of DemoEx" [Demo]="Demo"></app-demo>

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.

Verwenden Sie den Output und EventEmitter, um Daten von untergeordneten an übergeordnete Komponenten in Angular 2 zu übergeben

EventEmitter ist eine Klasse, die benutzerdefinierte Ereignisse ausgeben kann. Es ist eine Angular 2-Komponente, die es Ihnen ermöglicht, das beobachtbare Muster in Angular 2-Anwendungen zu verwenden.

Diese Komponente bietet eine Alternative zum herkömmlichen Callback-Muster und vereinfacht den Prozess des Auslösens der Änderungserkennung, indem sie Observables abbestellt, wenn sie nicht mehr benötigt werden.

Das folgende Beispiel zeigt, wie die übergeordnete Komponente das Ereignis abonniert und ihr Verhalten entsprechend ändert.

TypeScript-Code (parent.component.ts):

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'parent',
    template: '<button (click)="DemoEx()">Click here to go to the next component</button>',
})
export class ParentComponent  {
    @Input() name: string;
    @Output() SampleEx = new EventEmitter<string>();
    DemoEx() {
        this.SampleEx.emit(this.message)
    }
    message: string = "You are in Child Component";
}

TypeScript-Code (app.component.ts):

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular';
    message:string='';
    NextCom($event) {
        this.message = $event;
    }
}

HTML-Code (app.component.html):

<parent name="{{ name }}" (SampleEx)="NextCom($event)"></parent>
<br/>
<br/>
{{message}}

Klicken Sie hier, um die Live-Demonstration des obigen Beispiels zu überprüfen.

Verwenden Sie den Dienst, um Daten zwischen Komponenten in Angular 2 zu übergeben

Ein Dienst ist eine Klasse, die die Injectable-Schnittstelle implementiert. Es muss Methoden haben, die mit Injectable Decorator annotiert sind, und bei Bedarf eine oder mehrere Schnittstellen implementieren.

Bei der Übertragung von Daten über Komponenten hinweg, die keine direkte Verbindung haben, sollte ein Shared Service verwendet werden. Wenn Daten die ganze Zeit synchron sein müssen, ist das RxJS BehaviorSubject praktisch.

Wir können den Namen als Observable festlegen, das mit der Methode the.next() mit BehaviorSubject geändert werden kann. Dann können wir den letzten Wert als Rohdaten mit der Funktion getValue() extrahieren.

Der aktuelle Wert wird in BehaviorSubject gespeichert. Dadurch liest die Komponente immer den neusten Datenwert in BehaviorSubject.

Siehe das Beispiel unten.

TypeScript-Code (first.component.ts):

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
    selector: 'app-demo1',
    templateUrl: './first.component.html',
    styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
    sharedData: string;
data: any;
    constructor(private sharedService: SharedService) { }
    ngOnInit() {
        this.sharedService.sharedData$
        .subscribe(sharedData => this.sharedData = sharedData);
    }
    updateData() {
        this.sharedService.setData(this.data);
    }
}

TypeScript-Code (second.component.ts):

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
    selector: 'app-demo',
    templateUrl: './second.component.html',
    styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
    sharedData: string;
data: any;
    constructor(private sharedService: SharedService) { }
    ngOnInit() {
        this.sharedService.sharedData$
        .subscribe(sharedData => this.sharedData = sharedData);
    }
    updateData() {
        this.sharedService.setData(this.data);
    }
}

HTML Quelltext:

<h3>2nd Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
Saved Data {{ sharedData }}
<h1>Example of Unrelated Components: Sharing Data with a Service</h1>
<h3>1st Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
SavedData {{ sharedData }}

Der Vorteil der Weitergabe von Daten zwischen Komponenten besteht darin, dass Sie Ihr Projekt besser verstehen können, indem Sie es in kleinere Teile zerlegen, sodass Sie sich konzentrieren können, ohne von Hunderten von Codezeilen belastet zu werden.

Ein Team kann auch produktiver arbeiten, wenn jeder Entwickler an separaten Komponenten arbeitet.

Klicken Sie hier, um die Live-Demonstration des obigen Beispiels zu überprüfen.