Angular2 Übergabe von Daten an verschiedene Komponenten Dienste

Question

ich einen Datumsbereich, die ich möchte die ausgewählten Daten zwischen den verschiedenen Komponenten, ohne die Notwendigkeit teilen Code über alle Komponenten zu duplizieren

So habe ich architectured meine Anwendung auf diese Weise

<app-date-range /> //date range component 
<router-outlet></router-outlet> 

ich geschaffen habe auch einen Event-Service, die ich in meinem App-Modul-Anbieter hinzugefügt habe

@Injectable() 
export class ReportsEventService { 

public maininputrange = new Subject(); 
constructor() { } 

maininputrangeemit(data:any){ 
    this.maininputrange.next({type:"mainputrange", data:data}); 
} 

} 

in meinem Datumsbereich Komponente i emittieren wie dieses

constructor(
    private _reportEventService:ReportsEventService 
){ } 

    dateRangeChanged(data){ 
    ...other implementations 
    this._reportEventService.maininputrangeemit(this.mainInput); 
    } 

Nun würde Ich mag, wenn ich eine andere Komponente besuchen Sie die Daten auf init emittiert zuzugreifen.

mainInput:any; 
    constructor(
     private _reportsEvenService:ReportsEventService 
    ) { 
    _reportsEvenService.maininputrange.subscribe(
     (data)=>{ 
     console.log("receiving values"); //called many times 
     this.mainInput = data; 
     } 
    ) 
    } 

ngOnInit() { 
    console.log("maininput value is"); 
    console.log(this.mainInput); //always undefined 

} 

Wohin gehe ich falsch und ist meine Implementierung möglich?

Answer 1

Wenn Sie immer noch wissen wollen, was schiefgelaufen ist, hier ist es. In Ihnen ReportsEventService haben Sie nur eine Setter-Methode, Sie haben keine Getter-Methode, um den Wert zurückzugeben.

@Injectable() 
 
export class ReportsEventService { 
 

 
    public maininputrange = new Subject(); 
 
    constructor() {} 
 

 
    setmaininputrangeemit(data: any) { 
 
    this.maininputrange.next({ 
 
     type: "mainputrange", 
 
     data: data 
 
    }); 
 
    } 
 

 
    getmaininputrangeemit(): Observalble <any> { 
 
    return this.maininputrange.asObservable; 
 
    } 
 

 
}

mainInput: any; 
 
constructor(
 
    private _reportsEvenService: ReportsEventService 
 
) { 
 
    _reportsEvenService.getmaininputrange.subscribe(
 
    (data) => { 
 
     console.log("receiving values"); //called many times 
 
     this.mainInput = data; 
 
    } 
 
) 
 
} 
 

 
ngOnInit() { 
 
    console.log("maininput value is"); 
 
    console.log(this.mainInput); //always undefined 
 

 
}