Condition based router-outlet not changing its content on url change in app.component.html in angular

问题

In app.component.html , there is condition based template.. My problem is condition in ngif matches(but url changes) , then router-outlet do not change its content but if condition do not matches then content changes. Below is my code

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;
}

I have made different template for user and admin and want to display content within that template, the problem is , if url contain admin then it works perfectly for the first time, but if again i tries to navigate on admin component then url changes but content remains same unless i reload the page, but user components working fine

来源：https://stackoverflow.com/questions/65697694/condition-based-router-outlet-not-changing-its-content-on-url-change-in-app-comp