Маршрутизатор на основе условий не меняет свое содержимое при изменении URL-адреса в app.component.html в angular

В app.component.html есть шаблон на основе условий. Моя проблема заключается в том, что условие в ngif соответствует (но URL-адрес изменяется), тогда маршрутизатор-выход не меняет свое содержимое, но если условие не соответствует, содержимое изменяется. Ниже мой код

app.component.html

<app-web-header></app-web-header>
 <div *ngIf="isAdminComponent"> 
    <app-home ></app-home> 
</div>
<div *ngIf="!isAdminComponent"> 
<app-user-home></app-user-home>
</div>
<app-web-footer></app-web-footer>

app.component.ts

import { Component, Inject } from '@angular/core';
import{ GlobalConstants } from './common/global-constants';
import { first } from 'rxjs/operators';
import { User } from './data/schema/user';
import { UserService } from './data/service/user.service';
import {  AuthenticationService } from './data/service/authentication.service';
import {  Role } from './data/schema/role';
import { Router } from '@angular/router';
import {LOCAL_STORAGE, WebStorageService} from 'angular-webstorage-service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title =  GlobalConstants.siteTitle;
  public data:any=[];
  public href: string = "";
  loading = false;
  user: User;
  userFromApi: User;
  isadminComponent=false;
  constructor(
    private userService: UserService,
    private authenticationService: AuthenticationService,private router :Router){
      this.user = this.authenticationService.userValue;
      this.authenticationService.user.subscribe(x => this.user = x);

    } 

    ngOnInit() {
      this.isadminComponent=false;
      this.router.navigate([{outlets: {primary: this.href }}]);
      this.loading = true;
      this.userService.getById(this.user.id).pipe(first()).subscribe(user => {
          this.loading = false;
          this.userFromApi = user;
      });
  }

  get isAdmin() {
   // localStorage.setItem('isLoggedIn', "true");
    //    localStorage.setItem('role',  Role.Admin);
    return this.user && this.user.role === Role.Admin;
  }

  get isAdminComponent(){
    this.href = this.router.url;
    console.log("href "+this.href);
    if(this.href.includes("/admin/")){
   // this.router.navigateByUrl(this.href);
    return this.isadminComponent=true;}
  else  return this.isadminComponent=false;
  }
  
  logout() {
    this.authenticationService.logout();
  }
  collapsed = true;
}

Я сделал другой шаблон для пользователя и администратора и хочу отображать контент в этом шаблоне, проблема в том, что если URL-адрес содержит администратора, то он отлично работает в первый раз, но если я снова попытаюсь перейти на компонент администратора, тогда URL-адрес изменится, но содержимое остается прежним, если я не перезагружу страницу, но пользовательские компоненты работают нормально