I am new to JS, TS and Angular... So I have this angular component:

export class AdminProductsMenuComponent implements OnInit{
    constructor(private productService: ProductService,
                private alertService: AlertService,
                private router: Router) {
                    this.subscribeToDeleteProductEvents();
    }

    productsAdminModel: IGetProductAdminModel[] = [];
    private productId: string;

    ngOnInit(): void {
        this.executeGetAllProductsAsAdmin();
    }

    executeGetAllProductsAsAdmin() {
        this.productService.getAllProductsAsAdmin().subscribe({
            next: (productData) => this.productsAdminModel = productData
        })
    }

    private subscribeToDeleteProductEvents() {
        this.alertService.getSubjectAlertEvent().subscribe({
            next: (isConfirmed) => {

                if (isConfirmed) {
                    this.productService.deleteProduct(this.productId).subscribe({
                        next: () => {
                            this.reloadCurrentResources();
                        }
                    });
                }
            }
        });
    }

    private reloadCurrentResources(): void {
        // save current route first
    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
        this.router.navigate(['/AdminProducts']); // navigate to same route
    }); 
    }

    executeProductDelete(id: string) {
        this.productId = id;
        this.alertService.confirmationAlertProductDelete();
    }
    
}

Brief explanation: I have subscription in the constructor which listens for events during the lifetime of the component.

An event is fired when the last method is called (through the template) which prompts a SweetAlert confirm dialog. Depending on the selected the event is true or false.

Now here is the tricky part - if I move the executeProductDelete() method above reloadCurrentResources() and subscribeToDeleteProductEvents() and invoke it (executeProductDelete) it will complete the action and throw error

I have a feeling that it executes again the subscribeToDeleteProductEvents() and reloadCurrentResources() .

If I move the executeDeleteProduct() as the last method, no error occurs. Why is this behavior? I have a feeling that they continue to run synchronously. They are not invoked anywhere else.

CodePudding user response：

There seems to be 2 main problems there:

1. Avoid at all costs "reloading" the same component, try to abstract the reload logic into methods. This could cause weird issues and unecessary loads, as the SPA is meant to be a single page application.

2. Since you are problably re-instancianting the component over and over again through your reloadResources, the alert service behaviour subjects creates new subscriptions. And since you have unsubscribed from them, they will keep listening forever.