Hello now I'm making MEAN stack web application now. However, I got ObjectUnsubscribedErrorImpl error. First, I have user data on the main page. At this time, check the permission tag to determine whether it is normal user or admin. If login with admin, the admin header is displayed, and a button is created to go to the admin page. If you refresh after entering the admin page, an unsubscription error occurs. I don't know which part is problem.
main header component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { LocalAuthService } from '../../auth/auth.service';
import { User } from '../../auth/user.model';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
// User Auth
isUserAuth = false;
userName : string;
private authSubscription : Subscription;
userId : string;
permissionTag : boolean;
modalRef: MDBModalRef;
constructor( private authService: LocalAuthService,
private modalService: MDBModalService
) { }
ngOnInit(): void {
this.isUserAuth = this.authService.getIsAuth();
this.userName = this.authService.getUserName();
this.userId = this.authService.getUserId();
this.permissionTag = this.authService.getPermissionTag();
this.authSubscription = this.authService.getAuthStatusListener()
.subscribe(isAuth =>{
this.isUserAuth = isAuth;
this.userName = this.authService.getUserName();
this.userId = this.authService.getUserId();
this.permissionTag = this.authService.getPermissionTag();
});
}
ngOnDestroy(){
this.authSubscription.unsubscribe();
console.log("nav works");
}
}
main header component.html
<!--Double navigation-->
<body class="light-blue-skin">
<header>
<!-- Sidebar navigation -->
<mdb-side-nav #sidenav class="sn-bg-1" [fixed]="false">
<mdb-navbar-brand>
<li>
<div class="logo-wrapper waves-light">
<a href="#">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center">
</a>
</div>
</li>
<!--/. Logo -->
</mdb-navbar-brand>
<links>
<!--Social-->
<li>
<ul class="social">
<li>
<a class="icons-sm fb-ic">
<mdb-icon fab icon="facebook-f"> </mdb-icon>
</a>
</li>
<li>
<a class="icons-sm pin-ic">
<mdb-icon fab icon="pinterest"> </mdb-icon>
</a>
</li>
<li>
<a class="icons-sm gplus-ic">
<mdb-icon fab icon="google-plus"> </mdb-icon>
</a>
</li>
<li>
<a class="icons-sm tw-ic">
<mdb-icon fab icon="twitter"> </mdb-icon>
</a>
</li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group md-form mt-0 pt-1 waves-light" mdbWavesEffect>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<mdb-accordion [multiple]="false" aria-multiselectable="false">
<!-- Collapsible link -->
<mdb-accordion-item>
<mdb-accordion-item-head mdbWavesEffect>
<mdb-icon fas icon="chevron-right"></mdb-icon> Collapsible menu
</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li>
<a href="#" mdbWavesEffect>Link 1</a>
</li>
<li>
<a href="#" mdbWavesEffect>Link 2</a>
</li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>
<!-- Simple link -->
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head mdbWavesEffect>
<mdb-icon far icon="hand-pointer"></mdb-icon> Simple link
</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>
<!-- Collapsible link -->
<mdb-accordion-item>
<mdb-accordion-item-head mdbWavesEffect>
<mdb-icon far icon="eye"></mdb-icon> Collapsible menu 2
</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li>
<a href="#" mdbWavesEffect>Link 1</a>
</li>
<li>
<a href="#" mdbWavesEffect>Link 2</a>
</li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>
<!-- Simple link -->
<mdb-accordion-item class="no-collase">
<mdb-accordion-item-head mdbWavesEffect>
<mdb-icon far icon="gem"></mdb-icon> Simple link 2
</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>
</ul>
</li>
<!--/. Side navigation links -->
</links>
<div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<mdb-navbar SideClass="navbar navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"
mdbStickyHeader [containerInside]="false">
<navlinks class="navbar-container">
<!-- SideNav slide-out button -->
<div class="">
<a (click)="sidenav.toggle()" class="button-collapse hidden-nav-button-collapse mx-0">
<mdb-icon fas icon="bars"></mdb-icon>
</a>
</div>
<!--/. SideNav slide-out button -->
</navlinks>
<mdb-navbar-brand>
<!-- Breadcrumb-->
<div class="breadcrumbs breadcrumbs-hidden-nav breadcrumb-dn mr-auto">
<p>Image119</p>
</div>
<!--/. Breadcrumb-->
</mdb-navbar-brand>
<div class="breadcrumbs breadcrumbs-hidden-nav breadcrumb-dn mr-auto">
<a class="nav-link waves-light" [routerLink]="['']" mdbWavesEffect>
<span class="clearfix d-none d-sm-inline-block">Home</span>
</a>
</div>
<navlinks>
<ul *ngIf="!isUserAuth" class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav ie-hidden-double-nav">
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>
<mdb-icon fas icon="envelope"></mdb-icon>
<span class="clearfix d-none d-sm-inline-block">Contact</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>
<mdb-icon far icon="comments"></mdb-icon>
<span class="clearfix d-none d-sm-inline-block">Support</span>
</a>
</li>
<li class="nav-item dropdown btn-group" dropdown>
<a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
<mdb-icon fas icon="user"></mdb-icon>
<span class="clearfix d-none d-sm-inline-block">Account</span>
</a>
<div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
<a class="dropdown-item" [routerLink]="['/auth/login']">Login</a>
<a class="dropdown-item"[routerLink]="['/auth/signup']">Sign Up</a>
</div>
</li>
</ul>
<!-- normal user -->
<ul *ngIf="isUserAuth && !permissionTag" class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav ie-hidden-double-nav">
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>
<mdb-icon fas icon="envelope"></mdb-icon>
<span class="clearfix d-none d-sm-inline-block">Contact</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>
<mdb-icon far icon="comments"></mdb-icon>
<span class="clearfix d-none d-sm-inline-block">Support</span>
</a>
</li>
<li class="nav-item dropdown btn-group" dropdown>
<a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
<i class="fas fa-user"></i> {{userName}}
</a>
<div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
<a class="dropdown-item" [routerLink]="['/profile/edit', userId]">My Profile</a>
<a class="dropdown-item" [routerLink]="['/profile/downloadhistory']">Download History</a>
<a class="dropdown-item" [routerLink]="['/profile/upload']"> Image Upload </
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
