Daten zwischen den Komponenten übertragen Angular4

Question

Ich lerne Angular 4 seit ein paar Wochen. Ich kann nicht herausfinden, wie man Daten von einer Komponente zur anderen überträgt, da meine Komponenten vorher einfach waren. Ich fand heraus, dass das Beste, was ich verwenden kann, Behavioubsubject ist, weil ich eine Formularkomponente habe, die sich aus einer Listenkomponente ausfüllt, wenn ich einen Kunden bearbeite, anstatt einen neuen zu erstellen.

Customer

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../services/data.service'; 
import {Subscription} from 'rxjs/Subscription'; 

@Component({ 
    selector: 'app-cust-list', 
    templateUrl: './cust-list.component.html', 
    styleUrls: ['./cust-list.component.css'] 
}) 
export class CustListComponent implements OnInit { 

    isEdit:boolean = false; 
    subscription:Subscription; 

    customers: any[]; 
    customer = { 
    id: '', 
    name: '', 
    email: '', 
    phone: '' 
    } 

    constructor(public dataservice:DataService) { 
    console.log('werkz'); 
    this.dataservice.get().subscribe (customers =>{ 
    this.customers = customers; 
    }); 

    if(this.isEdit){ 
    this.subscription = this.dataservice.setCust.subscribe(customer => 
this.customer = customer) 
    } 
    } 

CustomerForm

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../services/data.service'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    selector: 'app-cust-form', 
    templateUrl: './cust-form.component.html', 
    styleUrls: ['./cust-form.component.css'] 
}) 
export class CustFormComponent implements OnInit { 

    subscription:Subscription; 

constructor(public dataservice: DataService){ 
    this.subscription = this.dataservice.getCust(cust); 
}} 

Data.service

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { Observable } from 'rxjs/Observable'; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class DataService{ 
public custSent = new BehaviorSubject<object>([]); 

    set setCust(customer){ 
     this.custSent.next(customer); 
} 

get getCust(){ 
    return this.custSent.getValue(); 
} 
} 

Ist das die korr ect Weg es zu tun? Wenn ja, kann mich jemand zu dem führen, was falsch ist? Wenn nicht, brauche ich vielleicht einen Stoß in die richtige Richtung. Vielen Dank im Voraus.

Answer 1

ändern Service Funktionsnamen wie folgt (entfernen get und set):

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { Observable } from 'rxjs/Observable'; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class DataService{ 
public custSent = new BehaviorSubject<object>([]); 

setCust(customer){ 
     this.custSent.next(customer); 
} 

getCust(){ 
    return this.custSent.getValue(); 
} 
}