typescript 按下按钮时如何从不同组件调用onInit?

7eumitmz  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(133)

我尝试在我进行预订(按下按钮时创建)后使屏幕更新预订,但按下按钮后似乎无法使其更新
new-reservation-component.html

<button (click)="onButtonClick()" mat-raised-button class="btn btn-primary" >Create</button>

new-reservation-component.ts

private scheduleComponent: ScheduleComponent
 onButtonClick() {
    this.scheduleComponent.ngOnInit()
     //also tried calling the other functions by making them public like fetchReservation 
  }

计划组件.ts

import {
  Component,
  OnDestroy,
  OnInit
} from '@angular/core';
import {Reservation} from "../../reservation.model";
import {ReservationsHttpService} from "../../reservations-http.service";
import {Subscription} from "rxjs";
import {HttpClient} from "@angular/common/http";

@Component({
  selector: 'app-schedule',
  templateUrl: './schedule.component.html',
  styleUrls: ['./schedule.component.scss']
})
export class ScheduleComponent implements OnInit, OnDestroy {

  isFetching = false;
  error: any = null
  private errorSub: Subscription;

  reservations: Reservation[] = [];

  weekYear_ReservationMap: Map<string, Reservation[]> = new Map<string, Reservation[]>();

  constructor(private http: HttpClient, private reservationHttpService: ReservationsHttpService) {

  }

  ngOnInit(): void {
    this.errorSub = this.reservationHttpService.error.subscribe(errorMessage => {
      this.error = errorMessage;
    });
    this.fetchReservations();
  }

  ngOnDestroy() {
    this.errorSub.unsubscribe();
  }

  private mapReservationsToWeekYear(): Map<string, Reservation[]> {
    let reservationMap = new Map<string, Reservation[]>();
    for (let reservation of this.reservations.sort((a, b) => a.date > b.date ? 1 : -1)) {

      let isWeekOfNextYear = ( reservation.date.getMonth() + 1 == 12
        && reservation.getWeekNumber() == 1); // To group according to ISO 8601.
      // curMonthYearKey is also the header displayed in the template.
      let curMonthYearKey = (reservation.date.getFullYear() + (isWeekOfNextYear ? 1 : 0)) + " - Week: " + reservation.getWeekNumber();
      let curMonthYearArray = reservationMap.get(curMonthYearKey) || [];

      curMonthYearArray.push(reservation);
      reservationMap.set(curMonthYearKey, curMonthYearArray || []);
    }
    return reservationMap;
  }

  private fetchReservations(){
    this.isFetching = true;
    this.reservationHttpService.fetchOpenReservations()
      .subscribe((reservations) => {
        this.reservations = reservations;
        this.weekYear_ReservationMap = this.mapReservationsToWeekYear();
        this.isFetching = false;
      }, (error) => {
        this.error = error;
        this.isFetching = false;
      }
    )

  }
}

我试着创建一个属性来使用schedule component.ts的函数,但它不起作用,我还试着将OnInit更改为DoCheck、OnChanges、OnViewChanges等,但效果不佳(或者确实起作用,但发送了太多请求,导致我的网站崩溃,就像我尝试DoCheck或AfterContentChecked时一样)
我还尝试了@ViewChild(调度组件)调度组件:调度组件;然后执行以下操作。scheduleComponent.ngOnInit()但这也不起作用
我尝试使用schedule.ts、ngOnDestroy、fetchReservation和OnInit中的函数,但没有成功

gijlo24d

gijlo24d1#

为什么不在单击按钮时调用fetchReservations呢?

相关问题