Question

我在Angular4工作，并试图在另一个函数中使用http get请求响应（我有一个酒店列表组件，我可以选择任何酒店，然后它重定向到另一个端点，我可以修改酒店）。我的想法是创建一个类，我有一个可以存储响应的变量。

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: ''
    }
};

然后在服务中实例化：

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

该服务在hotelregister组件中导入，我将响应对象保存在那里，如下所示：

 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)
            });
}

在这里，如果我控制台登录hotelservice.hotel.data，我有正确的回复。这就是我试图在修饰符组件中使用的内容，如下所示：从＆＃39; ../ hotel.service＆＃39;;

导入{HotelService}

@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(
  ) { }
 }

但是，hotelservice.hotel.data未定义。你可以帮忙解决这个问题吗？

Answer 1

问题是您应该在核心模块中添加服务，例如。 CREATE TABLE test(\n "id"....\n..."name"...\n );部分中的app.module.ts。这样它就是一个单例，否则你在每个组件中实例化一个新服务，每个组件都有自己独立的数据。

希望这是有道理的，否则请告诉我。

修改您必须从任何其他组件的提供商部分

中删除providers

Angular 4：如何在不同的组件中使用http请求响应？

1 个答案: