Menubar event emmiter broken after hide and show

[SethiaKynes]

Hi,

I use Menubar component wrapped in a div with ngIf:

<div *ngIf="authService.isLoggedIn()">
    <p-menubar [model]="nestedItems"></p-menubar>
</div>

On one of the items have a command set.

this.nestedItems = [
            {
                label: 'Logout',
                icon: 'fa-sign-out',
                command: (event) => {this.logout(event)}
            },
            {
                label: 'Home',
                icon: 'fa-home',
                routerLink: ['/home']
            }
        ];

When I show the component for the first time everything works fine and command is called as expected. After the component is hidden and then showed again, when I click 'Logout' item I get the error "ObjectUnsubscribedError". Source of the error is call: "item.eventEmitter.emit(event);" from MenubarSub class.

It works fine after setting eventEmmiter anew with each call, but I'm not sure if that's the optimal solution. Maybe I'm using it wrong?

itemClick(event, item: MenuItem) {
        if(!item.url||item.routerLink) {
            event.preventDefault();
        }

        if(item.command) {
            if(!item.eventEmitter) {
                item.eventEmitter = new EventEmitter();
                item.eventEmitter.subscribe(item.command);
            } else {
                item.eventEmitter.unsubscribe();
                item.eventEmitter = new EventEmitter();
                item.eventEmitter.subscribe(item.command);
            }

            item.eventEmitter.emit({
                originalEvent: event,
                item: item
            });
        }

        if(item.routerLink) {
            this.router.navigate(item.routerLink);
        }

        this.activeItem = null;
        this.activeLink = null;
    }

[murac]

I just ran into the same problem but with a contextMenu and @SethiaKynes code did fix the issue for now. using primeng 1.1.3.

So is this a bug or are we using subscriptions wrong?

[cagataycivici]

This should be fixed in recent PrimeNG release, please try with them and if issue persists drop a comment and we'll reopen.

[dlusignan]

Hi,

I'm still using "primeng": "^4.1.0-rc.2" and the problem is there.

<p-menubar [model]="menuItems"></p-menubar>

   this.menuItems = [
        {
            label: this.authService.user().Firstname + ' ' + this.authService.user().Lastname,
            icon: 'fa-user',

            items: [
                {
                    label: this.translateService.instant('Logout'),
                    icon: 'fa-unlock',
                    command: (event) => { this.logout(event, this) }
                },
            ]
        }
    ];

  logout(event: Event, item:MenuItem): void {

    if(item.command) {

        if(!item.eventEmitter) {

            item.eventEmitter = new EventEmitter();
            item.eventEmitter.subscribe(item.command);
        } else {

            item.eventEmitter.unsubscribe();
            item.eventEmitter = new EventEmitter();
            item.eventEmitter.subscribe(item.command);
        }

        item.eventEmitter.emit({

            originalEvent: event,
            item: item
        });
    }

    sessionStorage.clear();

    this.authService.isLoggedIn = false;

    this.router.navigateByUrl('/login');
}

Still getting this error after first click:

ObjectUnsubscribedError {originalStack: "Error: object unsubscribed↵ at ObjectUnsubscrib… (http://localhost:3000/polyfills.dll.js:4144:38)", zoneAwareStack: "Error: object unsubscribed↵ at ObjectUnsubscrib… (http://localhost:3000/polyfills.dll.js:4144:38)", stack: "Error: object unsubscribed↵ at ObjectUnsubscrib… (http://localhost:3000/polyfills.dll.js:4144:38)", message: "object unsubscribed", name: "ObjectUnsubscribedError"…}