角度视图未呈现，但路由URL更改

Question

在我的Angular 9应用程序中，单击“最新博客”组件后，博客详细信息视图没有更改，但浏览器中的路由器URL有所更改。但是，当我使用新获取的URL手动刷新页面时，视图现在可以成功更改。您可以检查我的存储库here。以下是我为组件的布线和渲染所做的代码

路由模块：

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

recent-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>