Angular:如何在再次导航到页面时重新加载页面或触发函数？

Question

我有2页，第1页是日历视图，第2页是将事件添加到日历的表单。当我从表单页面添加事件，存储它们并重定向回日历页面时，日历页面保持为空，直到页面重新加载或应用程序重新启动。因此，我需要一种方法来触发一些代码来填充日历，将添加的事件传递回日历视图，或者重新加载页面。最好是第一个选项。我该怎么做呢？从第2页返回后，如何告诉某些代码要触发？

日历页

import { AppointmentListModal } from './../modals/appointment-list/appointment-list.page';
import { AddEventPage } from './../modals/add-event/add-event.page';
import { Component, ViewChild, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { CalendarComponent } from 'ionic2-calendar/calendar';
import { AlertController, ModalController } from '@ionic/angular';
import { Storage } from '@ionic/storage';
import { ProvidersService } from '../providers.service';
import { EventsService } from '../events.service';

@Component({
  selector: 'app-calendar',
  templateUrl: 'calendar.page.html',
  styleUrls: ['calendar.page.scss'],
})
export class CalendarPage implements OnInit {
  constructor(){}

  reloadEvents(){
     //reload event logic
  }
}

import { AddEventPage } from './../add-event/add-event.page';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { CalendarPage } from './calendar.page';
import { NgCalendarModule  } from 'ionic2-calendar';

import { AddEventPageModule } from '../add-event/add-event.module';

import { AppointmentListModalModule } from '../modals/appointment-list/appointment-list.module';
import { AddEventModalModule } from '../modals/add-event/add-event.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AppointmentListModalModule,
    AddEventModalModule,
    RouterModule.forChild([
      {
        path: '',
        component: CalendarPage
      }
    ]),
    NgCalendarModule
  ],
  declarations: [CalendarPage]
})
export class CalendarPageModule {}

import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
import { Storage } from '@ionic/storage';
import { EventsService } from '../events.service';
import {Router} from "@angular/router"

@Component({
  selector: 'app-add-event',
  templateUrl: './add-event.page.html',
  styleUrls: ['./add-event.page.scss'],
})
export class AddEventPage {

  constructor(
    private s: Storage,
    private eventService: EventsService,
    private router: Router) {
    this.storage = s;
  }

  addEvent(){
    //logic that saves the added event from a form
  }
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { AddEventPage } from './add-event.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: AddEventPage
      }
    ])
  ],
  declarations: [
    AddEventPage
  ]
})
export class AddEventPageModule {}

我只需要知道如何使用angular中的进程来让页面知道要做什么。

Answer 1

您有多个选项，下面是其中两个

1-创建一个服务，其中包含Observable和BehaviorSubject以及notify方法，然后让您的日历组件订阅该服务的observable，在您的表单中调用service.notify并传递数据(或让服务再次获取数据)，然后由于您的日历已准备就绪，因此它将显示最新的数据

2-使用ngrx (或其他redux)存储中央数据，您的组件订阅存储，并在您的表单上分派操作

Answer 2

我最终创建了一个带有主题的服务。然后将该主题传递给我的日历，然后当我从表单页面中的服务调用subject.next(event)时，它会触发所需的函数来更新另一个页面上的日历。

Answer 3

如果你的页面2是一个对话框，我通常的一种方法是使用页面1上的对话框引用。

例如，在第1页中，有一个将第2页作为对话框打开的函数

addEventForm(date: Date){
     const dialogRef = this.matDialog.open(SomeFormComponent, { //given MatDialog var
      width: '50%',
      data: date
     });

     dialogRef.afterClosed().subscribe(result => {
      if(result == 'added') reloadPage();
     }
}

在第2页组件中类似以下内容

var eventAdded = false; //bind this to an event on html side

closeForm() { //if a the "close" button is pressed
 if(eventAdded) this.dialogRef.close('added');
 else this.dialogRef.close('cancelled');
}

表单将"added“返回到第1页，这将触发reloadPage()函数。有关材质对话框的更多信息，请访问here