Angular 9 URL-адрес маршрута изменяется, но представление не отображается

Question

Я создал приложение для блога с angular, в котором компонент с именем blog-details, содержащий сведения о блоге, отображается слева, а два других компонента из названных недавних блогов и категорий отображаются справа. компонент. Теперь, когда я пытаюсь изменить блоги по последним блогам, URL-адрес маршрута изменяется в браузере, но подробный вид нового блога не отображается в компоненте блога, пока я вручную не обновлю sh браузер , Если хотите, вы можете проверить весь мой репозиторий Github из здесь

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:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute} from '@angular/router';
import { BlogpostService } from '../blogpost.service';
import { Blogpost } from '../../models/blogpost';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-blog-detail',
  templateUrl: './blog-detail.component.html',
  styleUrls: ['./blog-detail.component.css']})
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");}

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RecentBlogComponent } from '../recent-blog/recent-blog.component';
import { BlogCategoryComponent } from '../blog-category/blog-category.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';

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

Answer 1

Необходимо использовать AsyncPipe в шаблоне HTML, чтобы подписаться на Observable и вернуть последнее значение, которое он испустил, а также switchMap в коде компонента, чтобы отправлять новый запрос каждый раз при изменении параметра

<div class="col-md-12" *ngIf="currentBlog$ | async as blog">

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, ParamMap} from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs';

public currentBlog$: Observable<any>    //take currentBlog value as an Observable

constructor(
    private route: ActivatedRoute,private blogpostService: BlogpostService,private titleService: Title) {}

ngOnInit() {
let myBlogId = this.route.snapshot.paramMap.get('blogId');
this.currentBlog$ = this.route.params.pipe(
      switchMap((params: ParamMap) =>
                    this.blogpostService.getSingleBlogInformation(params['blogId'])));}

Answer 2

Я полагаю, что вы хотите обновить компонент при обновлении URL.

В BlogDetialsComponnt вам необходимо изменить реализацию ngOnInit.

добавить переключатель импорта карты:

import { switchMap } from 'rxjs/operators'; 

ngOnInit должно выглядеть так:

ngOnInit() {
  const currentBlog = this.route.params.pipe(
    switchMap(params => {
      this.blogpostService.getSingleBlogInformation(params[id]);
    })
  )
}

сейчас currentBlog будет обновляться каждый раз, когда обновляется маршрутизатор id параметр

В вашем примере отображаются изменения после обновления страницы sh, поскольку компонент знает только первый идентификатор, и каждое последующее обновление игнорируется. Таким образом, после ссылки на страницу sh компонент запускается с новым идентификатором.