在组件之间导航时不需要的多个方法调用

Question

我正在创建角度应用程序，使用登录后遇到了一个奇怪的问题。让我们以ADMIN帐户登录示例为例。

正确登录后，网站布局现在看起来像这样：

[main navbar - options like "menu", "contact us" "homepage", etc]

[navbar visible after admin logs in - admin panel, options like "view all users", "view all products", "edit your data", etc]

[view with selected option from admin panel]

每个子页面由路由器出口（子层次结构）加载

在以下情况下：

第1步）管理员登录，网站导航到/ localhost / admin-panel /

第2步），管理员可以从主导航栏/管理面板导航栏中导航到任何页面

我看到过多次检查用户是否实际上是admin的方法（名为checkIfAdmin（））：

注意a）登录后，checkIfAdmin()方法被调用了两次。

注释b）点击帐户信息时，checkIfAdmin()已经被调用了四次...

请注意c），尤其是当在主导航栏上“菜单”时，checkIfAdmin()甚至被调用了六次！

我几乎可以肯定这是因为每次用户导航到另一个组件时Angular都会重新渲染嵌套组件，我不知道如何使它停止这样做的窍门...

以下是一些示例代码片段以及应用程序现在工作方式的可见效果：

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

应用程序路由：

app.routing.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'admin-panel',
    component: AdminPanelComponent,
    children: [
      {
        path: 'products',
        component: ProductsComponent,
        resolve: {
          products: ProductsResolve,
        }
      },
      {
        path: 'account',
        component: AccountComponent,
        resolve: {
          userData: UserResolve
        }
      },    
    ],
  }
];

导航栏组件：

Navbar.component.ts

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./../../app.component.css']
})
export class NavbarComponent implements OnInit {

  private loggedUser: RegisterUserModel = null;

  constructor(private authService: AuthService,
              private appService: AppService,
              private router: Router) {
  }

  ngOnInit() {
  }

  checkIfAdmin(): boolean {
    if (this.appService.getRole() === 'ADMIN') {
      console.log('for true: ', this.appService.getRole());
     //  console.log('ADMIN TRUE');
      return true;
    } else {
      console.log('for false: ', this.appService.getRole());
      // console.log('ADMIN FALSE');
      return false;
    }
  }

  checkOnline(): boolean {
    if (!this.authService.success) {
      return false;
    }
    this.loggedUser = this.appService.getUser();
    return true;
  }

主导航栏html：

navbar.component.html

<div role="navigation" class="navbar navbar-expand-lg navbar-light bg- 
light border-bottom mb-3">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" routerLink="/home">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="/menu">Menu</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="/login">Sign in</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="/register">Sign up</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="/contact">Contact us</a>
    </li>
    </ul>
    <div *ngIf="checkOnline()">
    <span *ngIf="!checkIfAdmin(); else admin">
        <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit" routerLink="/user-panel">My account</button>
    </span>
    <ng-template #admin>
    <span>
        <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit" routerLink="/admin-panel">Admin panel</button>
    </span>
    </ng-template>
    <div style="float: left ; margin-right: 30px; margin-top: 13px"><h5 
class="ml-3">{{loggedUser.firstName}}, you are logged in !</h5></div>
    <div style="float: right ; margin-right: 30px">
        <button class="btn btn-outline-success my-2 my-sm-0" 
(click)="logoutUser()">Logout</button>
    </div>
    </div>
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" 
placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit">Search</button>
</form>
</div>

管理面板html：

admin-panel.component.html

<div style="min-width: 200px; max-width: 300px">
  <div role="navigation" class="navbar navbar-expand-lg navbar-light bg- 
light border-bottom mb-3">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/admin-panel/account">Account 
info</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/menu">Users</a>
      </li>
    </ul>
  </div>
</div>
<router-outlet></router-outlet> 

帐户信息html：

account.component.html

<form class="form-inline my-2 my-lg-0">
  <div class="container">
    <table>
        //[form with user data]
    </table>
  </div>
</form>
<div>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" 
routerLink="/home">Go back to homepage</button>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" 
routerLink="/admin-panel/edit" >Edit your data</button>
</div>

导航后出现问题的屏幕截图：

任何帮助将不胜感激，谢谢！