如何在angular 4中管理组件之间的列表

时间:2018-07-03 09:46:37

标签: javascript angular typescript

我有一个BookingSearch组件。

//imports

@Component({
selector: 'booking-search',
templateUrl: './booking-search.component.html',
styleUrls: ['./booking-search.component.css']
})
export class BookingSearchComponent implements OnInit {

constructor(private bookingRetrieveService: BookingRetrieveService,
            private bookingTreeService: BookingTreeService) {
}

ngOnInit() {
}

loadBooking() {

  this.bookingRetrieveService.retrieveBooking(bookingId, firstName, lastName)
    .subscribe(
      response => {
        let openBookingUrl = '/booking?b=' + this.bookingId;
        window.open(openBookingUrl, '_self');
      },
      error => {

      }
    );
}

}

一旦预订被加载,它需要添加到预订树中,并且页面重排到BookingDetail组件。

@Injectable()
export class BookingTreeService {

  constructor() { 
  }

  addBooking(booking) {
  }

}     }

此预订树需要在BookingDetail组件中使用。

    @Component({
      moduleId: module.id,
      selector: 'booking-detail',
      templateUrl: 'booking-detail.component.html',
      styleUrls: ['booking-detail.component.css']
    })

    export class BookingDetailComponent implements OnInit {
      booking: any = {};

      constructor(private bookingService: BookingTreeService) {
      }

      ngOnInit() {
        //how to get updated booking tree here
      }

    }

搜索新的Bookinga时如何更新预订树,以及如何在BookingDetailComponent中使用它。

任何建议都值得赞赏。

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以将预订树存储在服务中,并从预订详细信息组件中访问它。

赞:

~

然后在您的bookingDetails组件中

@Injectable()
export class BookingTreeService {
  bookingTree: Booking[] = [];

  constructor() { }

  addBooking(booking) {
   this.bookingTree.push(booking);
  }
}