2016-06-30 15 views
0

Routen zwischen gemeinsam genutzten Dienst undefiniertDaten mit Winkel 2

export const SchoolyearsRoutes: RouterConfig = [ 
    { path: '', terminal: true, redirectTo: '/schoolyears' }, 
    { 
    path: 'schoolyears', component: SchoolyearsRootComponent, children: [ 
     { path: '', component: SchoolyearsListComponent }, 
     { path: 'edit/:id', component: SchoolyearsEditComponent }, 
     { path: 'create', component: SchoolyearsCreateComponent } 
    ] 
    }]; 

Dienst:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Schoolyear } from './schoolyear'; 


@Injectable() 
export class SchoolyearsEditService { 

    public schoolyear: Schoolyear; 

    constructor() { } 
} 

Stammkomponente:

import { Component }   from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { SchoolyearsEditService } from '../schoolyears-edit.service'; 

@Component({ template:`<router-outlet></router-outlet>`, providers: [SchoolyearsEditService]}) 
export class SchoolyearsRootComponent { } 

Kinder Komponente:

import { Component, OnInit } from '@angular/core'; 
import { RouterConfig, Router, ActivatedRoute} from '@angular/router'; 
import { SchoolyearsEditService } from '../schoolyears-edit.service'; 
import { Schoolyear } from '../schoolyear'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-schoolyears-edit', 
    templateUrl: 'schoolyears-edit.component.html', 
    styleUrls: ['schoolyears-edit.component.css'], 
}) 
export class SchoolyearsEditComponent implements OnInit { 
    schoolyear: Schoolyear; 
    constructor(private route: ActivatedRoute, private router: Router, private schoolyearsService: SchoolyearsEditService) { } 

    ngOnInit() { 
    this.schoolyear = this.schoolyearsService.schoolyear; 
    }; 
} 

HTML:

schoolyear Id: 
<input [value]="schoolyear.id"> 

schoolyear name:  
<input [value]="schoolyear.name"> 

schoolyear start date: 
<input [value]="schoolyear.startDate"> 

schoolyear end date:  
<input [value]="schoolyear.endDate"> 

im html Schuljahr ist immer undefiniert.

Warum werden die Daten nicht korrekt freigegeben?

Ich stelle den Dienst in der übergeordneten Komponente und teilen Sie es in der untergeordneten Komponente. Es sollte funktionieren, aber nicht!

+0

Ich sehe nicht, dass Sie Werte an öffentlichen "Schooleear: Schooleear" Variablen in Ihrem Dienst irgendwo zuweisen. Also sollte es offensichtlich undefiniert sein, oder? – HarshaXsoad

+0

siehe meinen Kommentar zu Günter am Ende. – Elisabeth

Antwort

1

Es ist wahrscheinlich korrekt freigegeben, aber es wird der Schuljahreswert zu spät, wenn das DOM bereits Rendern ist. Sie können dies mindern, indem Sie den elvis-Operator oder den sogenannten sicheren Navigationsoperator verwenden.

schoolyear Id: 
<input [value]="schoolyear?.id"> 

schoolyear name:  
<input [value]="schoolyear?.name"> 

schoolyear start date: 
<input [value]="schoolyear?.startDate"> 

schoolyear end date:  
<input [value]="schoolyear?.endDate"> 

diese Weise ist es, sobald die Werte in die Eingänge geben wird als die Variable Schuljahr gefüllt wird.

+0

immer noch undefiniert, hat nicht geholfen: -/ – Elisabeth

1

Sie kopieren primitive Werte

ngOnInit() { 
    this.schoolyear = this.schoolyearsService.schoolyear; 
    } 

dies keine Verbindung zwischen Service und Ihre Komponente nicht erstellen. Dies ist eine einmalige Aktion.

Wenn der Wert beim Kopieren noch nicht festgelegt wurde (Code oben), wird es nicht passieren.

Mit Observable, in diesem Fall vielleicht BehaviorSubject, die das letzte emittierte Ereignis an neue Abonnenten sendet, wäre eine bessere Option.

Weitere Details finden Sie unter https://angular.io/docs/ts/latest/cookbook/component-communication.html.

+0

Ich frage mich nur, warum es für viele Leute auf SO nicht mit BehaviorSubject funktioniert. – Elisabeth

+0

Ich würde ein konkretes Beispiel brauchen. Was oft funktioniert, ist nicht, Werte von dem Dienst in die Komponente zu kopieren, sondern stattdessen direkt an den Wert des Dienstes zu binden wie '{{shoolyearsService.schoolyear.id}}' '(vielleicht' '' wie von @rinukkusu gezeigt). Die Verwendung von Observablen ist die elegantere Lösung, da sie Angular über Änderungen pusht, was weitere Optimierungen für die Änderungserkennung ermöglicht. Die Verwendung von Observable macht Ihren Code schwieriger zu verstehen, wenn Sie nicht daran gewöhnt sind, also denke ich, dass dies eine gute Option wäre. –

+0

Ich habe den Fehler gefunden.Es ist ein PICNIC: D Die Editierfunktion in der SchoolyearsListComponent (oben nicht aufgelistet ...) wurde nie aufgerufen, da ich einen RouterLink direkt im HTML verwende ... jetzt funktioniert es. Aber ich habe einen anderen Fehler gefunden. Ublicherweise kann hier ein beobachtbarer Ratschlag helfen: Wenn ich direkt die URL/Schuljahre/edit/5 in der URL eingebe, sind meine Schuldaten natürlich undefiniert, da ich in der Editier-Funktion das ausgewählte Schuljahr auf den Edit setze Bedienung. Ich denke, es gibt keine Lösung für dieses Recht? Laden Sie das Schuljahr einfach wieder über die ID aus dem Backend ... – Elisabeth