基于条件的路由器插座不会在 angular 的 app.component.html 中的 url 更改时更改其内容

如何解决基于条件的路由器插座不会在 angular 的 app.component.html 中的 url 更改时更改其内容

在 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 包含 admin，那么它第一次可以完美运行，但是如果我再次尝试在 admin 组件上导航，则 url 会更改但内容保持不变，除非我重新加载页面， 但用户组件工作正常