Question

我制作了一个带角度的博客应用程序，其中在左侧显示了一个名为blog-details的组件，其中包含博客的详细信息，而在该组件的右侧则显示了两个其他组件（称为最近的博客和类别）。现在，当我尝试通过最近的博客更改博客时，路由URL在浏览器上正在更改，但是直到我手动刷新浏览器后，新博客的详细视图才会在博客详细信息组件上呈现。如果需要，您可以从here

检查我的整个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

我相信您要在更新网址时更新组件。

在BlogDetialsComponnt中，您需要更改ngOnInit实现。

添加导入switchMap：

import { switchMap } from 'rxjs/operators';

ngOnInit应该像：

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

现在currentBlog每次路由器id参数更新时都会更新

您的示例在页面刷新后显示更改，因为组件仅知道第一个id，并且每次后续更新都将被忽略。因此，在刷新页面后，将使用新的ID启动组件。

Answer 2

必须使用HTML模板中的AsyncPipe来订阅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'])));}

Angular 9路由URL更改，但视图未呈现

2 个答案: