时间戳

首页 > 解决方案 > Angular：再次导航到页面时如何重新加载页面或触发功能？

angular - Angular：再次导航到页面时如何重新加载页面或触发功能？

问题描述

我有 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 的流程来让页面知道做某事。

标签： angulartypescriptionic4

解决方案

您有多种选择，这里有两个

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

2 - 使用ngrx（或其他redux）拥有中央数据存储，您的组件订阅存储，并在您的表单上调度一个动作

推荐阅读