Angular 4: Wie HTTP Request Response in verschiedenen Komponenten zu verwenden?

Question

Ich arbeite in Angular4, und versuche, eine http Get Request-Antwort in einer anderen Funktion zu verwenden (Ich habe eine Hotelliste-Komponente, ich kann ein beliebiges Hotel auswählen, dann umleiten zu einem anderen Endpunkt, wo ich das Hotel ändern kann). Meine Idee war, eine Klasse zu erstellen, wo ich die Variable habe, die die Antwort speichern kann.

export class Hotel { 
data = { 
    type: 'hotels', 
    id: '', 
    attributes: { 
     location: '', 
     name: '', 
     main_image_src: '', 
     has_wifi: '', 
     has_parking: '', 
     has_pets: '', 
     has_restaurant: '', 
     has_bar: '', 
     has_swimming_pool: '', 
     has_air_conditioning: '', 
     has_gym: '', 
     meal_plan: '', 
     user_id: '', 
     booking_id: '', 
     amount: '', 
     currency: '', 
     status: '', 
     stars: '' 
    } 
}; 

Dann wird es in einem Dienst instanziiert:

@Injectable() 
export class HotelService { 
    hotel = new Hotel; 
} 

Der Service im hotelregister Komponente importiert wird und ich spare das Antwortobjekt gibt, wie folgt aus:

getHotelId(id) { 
    const endpoint = 'https://cake-cup.glitch.me/api/hotels/'+id; 
    this.hotelregistrationservice.httpRequest(this.hotelservice.hotel, 
    endpoint, 'get') 
     .subscribe(
      response => { 
       this.hotelservice.hotel.data = response; 
       this.router.navigate(['hotels/1']) 

      }, 
      error => { 
       console.error(error) 
      }); 
} 

Hier Wenn ich die hotelservice.hotel.data Konsole logge, habe ich die richtige Antwort. Dies ist, was ich versuche, in der Modifikator-Komponente wie folgt zu verwenden: Import {HotelService} von '../hotel.service';

@Component({ 
    selector: 'app-single-hotel', 
    templateUrl: './single-hotel.component.html', 
    styleUrls: ['../../assets/app.component.scss'], 
    providers: [HotelService] 
}) 
export class SingleHotelComponent implements OnInit { 

    constructor(
    public hotelservice: HotelService, 
) { 
    console.log(this.hotelservice.hotel.data) 
    } 

ngOnInit(
) { } 
} 

Allerdings ist das Hotelservice.hotel.data undefined. Könnten Sie bitte helfen, das Problem zu beheben?

Answer 1

Das Problem ist, dass Sie Ihren Dienst in Ihrem Kernmodul z. app.module.ts in der providers Abschnitt. Auf diese Weise wird es ein Singleton sein, andernfalls werden Sie in jeder Komponente einen neuen Dienst instanziieren und jeder wird seine eigenen unabhängigen Daten haben.

Hoffe das macht Sinn, sonst lass es mich wissen.

Edit: Sie werden die HotelService von allen anderen Komponenten Anbieter Abschnitt