Angular 角度4创建后更新索引页

我正在建立一个音乐会

活动

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

事件路由.module.ts

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

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

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

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

事件创建.component.ts

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

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

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

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

事件索引.component.ts

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

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

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

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

事件服务.ts

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

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

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

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

@Injectable（）
导出类事件服务{
私人apiUrl服务器http://localhost:3000/events';
构造函数（私有http:HttpClient）{}
query（）：可观察{
返回this.http.get（this.apirl.map）（item=>item as Event[]）；
}
get（id:number）：可观察{
返回null；
}
保存（事件：事件）：可观察{
返回this.http.post（this.apirl，event）；
}
删除（事件：事件）：可观察{
返回this.http.delete（this.apirl+'/'+event.id）；
}
更新（事件：事件）：可观察{
返回null；
}
}

在

事件create.component.ts

中，您正在HTTP调用结束前重定向

请尝试以下方法：

onSubmit（）{
if（this.eventForm.valid）{
let date:date=新日期（this.eventForm.controls['date'].value）；
let time:Date=新日期（this.eventForm.controls['time'].value）；
让事件：事件=新事件(
无效的
无效的
此.eventForm.controls['venture'].value，
此.formatTimestamp（日期、时间），
此.eventForm.controls['title'].value，
此.eventForm.controls['description'].value
);
this.eventService.save（event.subscribe）（响应=>{
this.router.navigate（['/event']）；
});
}
}