Question

我正在建立一个音乐会Event网站。目前我有一个事件索引页面和一个事件创建页面。创建事件后，我重定向回索引页面，但除非刷新索引页面，否则新事件不会显示。我希望在提交/创建新事件后自动显示新事件。我尝试在组件之间共享数据，但似乎没有用。我真的不知道对此有什么正确的方法。

事件routing.module.ts

const routes: Routes = [
  { path: 'event', component: EventIndexComponent },
  { path: 'event/create', component: EventCreateComponent },
  { path: 'event/edit/:id', component: EventCreateComponent }
];

事件create.component.ts

export class EventCreateComponent implements OnInit {
...
ngOnInit(): void {
  this.getVenues();
}

getVenues(){
  this.venueService.query().subscribe(
    venues => {
      this.venues = venues;
    },
    err => {
      console.log(err);
    }
  );
}

onSubmit() {
  if (this.eventForm.valid) {
    let date: Date = new Date(this.eventForm.controls['date'].value);
    let time: Date = new Date(this.eventForm.controls['time'].value);

    let event: Event = new Event(
      null,
      null,
      this.eventForm.controls['venue'].value,
      this.formatTimestamp(date, time),
      this.eventForm.controls['title'].value,
      this.eventForm.controls['description'].value
    );

    this.eventService.save(event).subscribe();

    this.router.navigate(['/event']);
   }
}

事件index.component.ts

export class EventIndexComponent implements OnInit {
  event: Event;

  private events: Event[];

  constructor(
    private router: Router,
    private eventService: EventService
  ) { }

  ngOnInit() {
    this.getEvents();
  }

  getEvents(){
    this.eventService.query().subscribe(
      events => {
        this.events = events;
      },
      err => {
        console.log(err);
      }
    )
  }

event.service.ts

@Injectable()
export class EventService {

  private apiUrl = 'http://localhost:3000/events';

  constructor(private http: HttpClient) {}

  query(): Observable<Event[]>{
    return this.http.get(this.apiUrl).map(item => item as Event[]);
  }

  get(id: number): Observable<Event>{
    return null;
  }

  save(event: Event): Observable<Event>{
    return this.http.post<Event>(this.apiUrl, event);
  }

  delete(event: Event): Observable<Event>{
    return this.http.delete<Event>(this.apiUrl + '/' + event.id);
  }

  update(event: Event): Observable<Event>{
    return null;
  }
}

Answer 1

在event-create.component.ts中，您在HTTP呼叫结束前重定向。

请改为尝试：

onSubmit() {
  if (this.eventForm.valid) {
    let date: Date = new Date(this.eventForm.controls['date'].value);
    let time: Date = new Date(this.eventForm.controls['time'].value);

    let event: Event = new Event(
      null,
      null,
      this.eventForm.controls['venue'].value,
      this.formatTimestamp(date, time),
      this.eventForm.controls['title'].value,
      this.eventForm.controls['description'].value
    );

    this.eventService.save(event).subscribe(response => {
      this.router.navigate(['/event']);
    });
   }
}

创建后的Angular 4更新索引页面

1 个答案: