Javascript 角度视图未渲染，但路由URL正在更改

在我的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>

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

最近更新的blog.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>

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

最近的博客


{{blog.title}

我尝试在上运行您的代码，但路由按预期工作。你找到解决办法了吗？