Page doesn't reload problem Ionic4 Angular

activity-page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ActivatedRouteSnapshot, Router } from '@angular/router';
import { NavController } from '@ionic/angular';
import * as moment from 'moment';
import {
  textAreaLimitCharsLarge,
  selectAllChildrenText,
  unselectAllChildrenText,
  TagColorsEnum
} from '../../../constants';
import {
  dayReportActivityModel,
  dayReportSelectedChildren
} from '../../../models/interface';
import { AppService } from '../../../services/app.service';
import { DayReportService } from '../../../services/day-report.service';
import { ActivitiesService } from '../../../services/activities.service';

@Component({
  selector: 'app-activity',
  templateUrl: './activity.page.html',
  styleUrls: ['./activity.page.scss']
})
export class ActivityPage implements OnInit {
  href: any;
  note: dayReportActivityModel;
  activityDate: string;
  private activityTime: string;
  title: string;
  notes: string;
  private shareWithFamily: boolean;
  selectButtonText: string;
  private selectedChildren: Array<dayReportSelectedChildren>;
  fetchedChildren: Array<dayReportSelectedChildren>;
  private preselectedChildren: any;
  dateFromDailyOverview: string;

  isEditModeOn: any;
  private groupId: number;
  private localGuid: string;
  private childId: string;
  textLimit: string;
  childrensIdArray: any;
  isPreviewModeOn: boolean;
  date;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    public navCtrl: NavController,
    private appService: AppService,
    public dayReportService: DayReportService,
    public activitiesService: ActivitiesService
  ) {
    this.groupId = this.appService.defaultGroup;
    this.selectedChildren = [];
    this.title = '';
    this.notes = '';
    this.selectButtonText = 'ALLE KINDER AUSWÄHLEN';
    this.shareWithFamily = false;
    this.notes = '';
    this.title = '';
    this.selectedChildren = [];
    this.childrensIdArray = [];
    this.localGuid;
    this.textLimit = textAreaLimitCharsLarge;
    this.isEditModeOn = false;
  }

  ngOnInit() {
    // let date = this.activatedRoute.snapshot.params['date'];
    // this.childId = this.activatedRoute.snapshot.params['childId']
    this.appService.showLoader();
    this.activatedRoute.queryParams.subscribe((params) => {
      if(this.router.getCurrentNavigation().extras.state){
        console.log('Current state: ', this.router.getCurrentNavigation().extras.state)
        this.date = this.router.getCurrentNavigation().extras.state.date;
        this.isEditModeOn = this.router.getCurrentNavigation().extras.state.editMode === true ? true : false;
        this.href = '/tabs/' + this.router.getCurrentNavigation().extras.state.href;
        this.dateFromDailyOverview = this.router.getCurrentNavigation().extras.state.date;
        this.childId = this.router.getCurrentNavigation().extras.state.childId;
      }
    });
    // this.route.paramMap.subscribe(params => {

    // })
    console.log('this.isEditModeOn on init', this.isEditModeOn, this.date)
    if (this.isEditModeOn) {
      this.dateFromDailyOverview = this.date;
      this.getChildrenOnEdit();
      console.log('Updated vars', this.dateFromDailyOverview, this.groupId)
    } else {
      //this.dateFromDailyOverview = date;
      this.activityDate = this.appService.activityFormatDate(this.date);
      this.getChildren();
    }
  }

  public selectChildBasedOnParams() {
    this.fetchedChildren = this.fetchedChildren.map(child => {
      if (child.id == this.childId) {
        return {
          ...child,
          color: 'primary'
        };
      }
      return child;
    });

    this.selectedChildren = this.fetchedChildren.filter(child => {
      return child.color === TagColorsEnum.primary;
    });
  }

  public setDOMVariables(date: string): void {
    this.title = this.note.activitytitle;
    this.notes = this.note.description;
    this.activityDate = moment(date).format();
    this.activityTime = this.note.activitytime;
    this.preselectedChildren = this.note.arrayChildren;
    this.shareWithFamily = this.note.sharewithfamily;
  }

  async getActivity() {
    let reportData = this.appService.routeParams['reportData'];
    if (!reportData) return false;
    this.localGuid = reportData.activity_details.guid;
    try {
      const note: any = await this.activitiesService.getActivity(
        this.localGuid
      );
      const fullDate = `${moment(
        note.mobile_employee_activity_get[0].activitydate
      ).format('YYYY-MM-DD')} ${
        note.mobile_employee_activity_get[0].activitytime
        }`;
      console.log('full date from GET', fullDate);
      const data = note.mobile_employee_activity_get[0];
      this.note = {
        date: moment(fullDate).format(),
        description: data.description,
        activitystatus: data.activitystatus,
        activitydate: moment(fullDate).format('YYYY-MM-DD'),
        arrayChildren: data.child,
        activitytime: moment(fullDate).format('YYYY-MM-DD HH:mm'),
        activitytitle: data.activitytitle,
        lasteditby: data.lasteditby,
        guid: this.localGuid,
        sharewithfamily: data.sharewithfamily
      };
      this.setDOMVariables(fullDate);
      return this.preselectedChildren;
    } catch (err) {
      console.log(err);
    }
  }

  public setActivePreselectedChildren() {
    return this.fetchedChildren.map(el => {
      if (this.preselectedChildren.includes(Number(el.id))) {
        return {
          ...el,
          color: 'primary'
        };
      }
      return el;
    });
  }

  public updateActiveSelectedChildren() {
    return (this.selectedChildren = this.fetchedChildren.filter(child => {
      return child.color === TagColorsEnum.primary;
    }));
  }

  public setSecondaryColor() {
    this.fetchedChildren.forEach((item, i) => {
      this.fetchedChildren[i].color = TagColorsEnum.secondary;
    });
    return this.fetchedChildren;
  }

  public setPrimaryColor() {
    this.fetchedChildren.forEach((item, i) => {
      this.fetchedChildren[i].color = TagColorsEnum.primary;
    });
    return this.fetchedChildren;
  }

  public getChildrenOnEdit() {
    this.dayReportService
      .getChildren(this.groupId, this.dateFromDailyOverview)
      .then((val: any) => {
        this.fetchedChildren = val.mobile_employee_getactive_children_of_day.map(
          item => item
        );
        this.setSecondaryColor();
      })
      .then(fetchedChildren => {
        return this.getActivity();
      })
      .then(preselectedChildren => {
        this.preselectedChildren = preselectedChildren;
        this.fetchedChildren = this.setActivePreselectedChildren();
        this.selectedChildren = this.updateActiveSelectedChildren();

        if (this.childId) {
          this.selectChildBasedOnParams();
        }
        this.appService.dismissLoader();
      })
      .catch(err => console.log('Error with fetching children', err));
  }

  public getChildren() {
    console.log('getChildren() check for arguments', this.groupId, this.dateFromDailyOverview)
    this.dayReportService
      .getChildren(this.groupId, this.dateFromDailyOverview)
      .then((val: any) => {
        this.fetchedChildren = val.mobile_employee_getactive_children_of_day.map(
          item => item
        );
        this.setSecondaryColor();
      })
      .then(fetchedChildren => {
        if (this.preselectedChildren) {
          this.fetchedChildren = this.setActivePreselectedChildren();
          this.selectedChildren = this.updateActiveSelectedChildren();
        }
        if (this.childId) {
          this.selectChildBasedOnParams();
        }
        this.appService.dismissLoader();
      })
      .catch(err => console.log('Error occured in getChildren()', err));
  }

  public selectAll() {
    if (this.selectButtonText === selectAllChildrenText) {
      this.selectButtonText = unselectAllChildrenText;
      this.setPrimaryColor();
      this.selectedChildren = this.fetchedChildren.map(item => item);
    } else {
      this.selectButtonText = selectAllChildrenText;
      this.setSecondaryColor();
      this.selectedChildren = this.fetchedChildren.filter(
        child => child.color === TagColorsEnum.primary
      );
    }
  }

  public changeTagColor(i: number) {
    if (this.fetchedChildren[i].color === TagColorsEnum.secondary) {
      this.fetchedChildren[i].color = TagColorsEnum.primary;
      this.selectedChildren = this.fetchedChildren.filter(
        child => child.color === TagColorsEnum.primary
      );
    } else {
      this.fetchedChildren[i].color = TagColorsEnum.secondary;
      this.selectedChildren = this.fetchedChildren.filter(
        child => child.color === TagColorsEnum.primary
      );
    }
  }

  async submitNote(note: dayReportActivityModel) {
    try {
      await this.activitiesService.sendActivityNote(note);
      this.appService.presentSuccessToast(
        'Eintrag erfolgreich hinzugefügt',
        1500
      );
      this.cancel();
    } catch (err) {
      console.log(err);
    }
  }

  async updateNote(note: dayReportActivityModel) {
    try {
      await this.activitiesService.updateActivity(note);
      this.appService.presentSuccessToast(
        'Änderung erfolgreich gespeichert',
        1500
      );
      this.cancel();
    } catch (err) {
      console.log(err);
    }
  }

  public handleChange(childrensId: number[]) {
    this.note.activitydate = moment(this.activityDate).format('YYYY-MM-DD');
    this.note.activitytime = moment(this.activityDate).format(
      'YYYY-MM-DD HH:mm'
    );
    this.note.activitytitle = this.title;
    this.note.description = this.notes;
    this.note.arrayChildren = childrensId;
    this.note.sharewithfamily = this.shareWithFamily;
  }

  public submit() {
    let selectedChildrensIds = this.selectedChildren.map(child =>
      parseInt(child.id)
    );
    if (selectedChildrensIds.length > 0) {
      let note = {
        date: moment(this.activityDate).format('HH:mm'),
        description: this.notes,
        activitystatus: 1,
        activitydate: moment(this.activityDate).format('YYYY-MM-DD'),
        arrayChildren: selectedChildrensIds,
        activitytime: moment(this.activityDate).format('YYYY-MM-DD HH:mm'),
        activitytitle: this.title,
        lasteditby: 39,
        sharewithfamily: this.shareWithFamily
      };
      if (this.isEditModeOn) {
        this.handleChange(selectedChildrensIds);
        return this.updateNote(this.note);
      }
      return this.submitNote(note);
    } else {
      this.appService.showAlertChildren();
    }
  }

  cancel() {
    this.title = "";
    this.notes = "";
    this.activityDate = "";
    this.activityTime = "";
    this.preselectedChildren = [];
    this.shareWithFamily = false;
    this.router.navigateByUrl('/tabs/daily-overview', { replaceUrl: true });
  }
}