Angular просмотр не отображается, но изменение маршрута URL

Question

В моем приложении Angular 9 подробное представление блога не изменяется при нажатии компонента недавнего блога, но URL-адрес маршрутизатора изменяется в браузере. Но когда я вручную обновляю страницу с помощью вновь полученного URL-адреса, представление теперь успешно меняется. Вы можете проверить мой репозиторий здесь . Ниже мой код, который я сделал для маршрутизации и рендеринга компонентов

модуль маршрутизации:

const routes: Routes = [
  {path: 'blog/:id', component: BlogDetailComponent}];

@NgModule({
  declarations: [
    RecentBlogComponent,BlogCategoryComponent,BlogDetailComponent ],
imports: [
    RouterModule.forChild(routes),CommonModule,ClientRoutingModule, FormsModule,ReactiveFormsModule],
  exports: [
    RouterModule,RecentBlogComponent,BlogCategoryComponent,BlogDetailComponent]})
export class ClientModule { }

blog-detail.component. html:

<div class="container">
  <div class="row">
    <div class="col bottom">
      <div class="col-md-12" *ngIf="currentBlog">
        <h1>{{currentBlog.title}}</h1><hr>
         <div class="img-responsive"><img src="http://localhost/Angular7Blog/api/uploads/{{currentBlog.image}}" class="img-responsive"></div>
         <hr><br>
         <div [innerHtml]="currentBlog.description"></div>
      </div></div>
    <div class="col-12 col-md-3 order-2 order-md-2" style="margin-top: 1.1%;">
      <app-recent-blog></app-recent-blog>
      <app-blog-category></app-blog-category>
  </div></div></div>

blog-detail.component.ts:

export class BlogDetailComponent implements OnInit {
   public currentBlog: Blogpost;
     constructor( private route: ActivatedRoute, private router: Router, private blogpostService: BlogpostService, private titleService: Title) { }
 ngOnInit() {
    console.log('blog-detail ngOnInit called')
    let myBlogId = this.route.snapshot.paramMap.get('id');
    console.log(myBlogId);
    this.blogpostService.getSingleBlogInformation(myBlogId).subscribe(
                (data: Blogpost) =>{ console.log(data); this.currentBlog = data; }
                error =>{ console.log("some error occured");}

недавний blog.component. html:

<div class="container">
  <div class="row">
    <div class="col-12">
      <h6 class="text-muted">Recent Blogs</h6> 
      <ul class="list-group" *ngFor="let blog of blogs">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <div class="image-parent">
            <a [routerLink]="['/blog', blog.id]">
              <img src="http://localhost/Angular7Blog/api/uploads/{{blog.image}}" class="img-fluid" alt="image">
            </a>
            </div>
              <a [routerLink]="['/blog', blog.id]">
                {{blog.title}}
              </a></li></ul></div></div></div>