In my Angular 8 project, there is a service function responsible for copying data. However, I encountered an issue where if I copy the data on a page, navigate to another page, and then return to the original page to copy the data again, it ends up duplicating the copied data. This duplication continues and the service function gets called multiple times, resulting in excessive copies being made.
Despite trying various methods, I have not been able to resolve this issue of data being copied multiple times. I hope you can comprehend my problem and provide some answers or solutions.
Below is the code from my app.module.ts file:
// App module imports
import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';
import { ModuleWithProviders } from '@angular/compiler/src/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
// Component imports
import { AppComponent } from './app';
import { CategoryComponent } from './views/category';
// Service import
import { CategoryService } from './services/category';
@NgModule({
declarations: [
AppComponent,
CategoryComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
HttpClientModule
],
providers: [{ provide: APP_BASE_HREF, useValue: '/AngularProject/' }, CategoryService ],
bootstrap: [AppComponent]
})
export class AppModule { }
Here are the codes from my service file:
// Service implementation
import { Injectable } from "@angular/core";
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ICategory } from '../models/ICategory';
@Injectable({ providedIn: 'root' })
export class CategoryService {
private linkIndex: string = "Ajax/Category/Index";
private linkCopy: string = "Ajax/Category/Copy";
constructor(private http: HttpClient) {
}
getIndex(): Observable<Array<ICategory>> {
return this.http.get<Array<ICategory>>(this.linkIndex);
}
getCopy(id: string): Observable<boolean> {
let params = new HttpParams().set("id", id);
return this.http.get<boolean>(this.linkCopy, { params: params });
}
}
Lastly, here's the code snippet from my CategoryComponent:
// Component logic
import { Component, OnDestroy, OnInit } from "@angular/core";
import { Subscription } from "rxjs";
import { Router } from "@angular/router";
import { CategoryService } from "../../services/category";
import * as $ from "jquery";
@Component({
templateUrl: './index.html'
})
export class CategoryComponent implements OnInit, OnDestroy {
errorMsg: string;
CategoryList: any;
callTable: boolean;
private subscription: Subscription = new Subscription();
constructor(private service: CategoryService, private router: Router) {
}
ngOnInit() {
this.callTable = true;
this.FillData();
}
... (truncated for brevity)