Angular 8 动态路由不更新页面内容-JavaScript中文网-JavaScript教程资源分享门户

最近我遇到了一个在 Angular 8 中动态路由不更新页面内容的问题。经过研究和实践，我总结了一些解决方案，希望能对大家有所帮助。

问题描述

在我的 Angular 应用程序中，我使用了动态路由来加载不同的模块。但当我在应用程序中切换路由时，页面的内容没有更新。尽管我的代码似乎正确无误，但我仍然无法发现错误。

解决方案

在我的研究中，我找到了以下解决方案：

1. 使用 Observable

在我的应用程序中，我使用了 BehaviorSubject 来创建一个可观察的路由。这个 BehaviorSubject 随着路由的变化而变化。因此，每当路由变化时，我可以通过订阅 BehaviorSubject 获取最新的路由参数并更新页面内容。

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  routeSubject = new BehaviorSubject(null);

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.routeSubject.next(params.get('id'));
    });
  }
}

在上面的代码中，我创建了一个 BehaviorSubject 对象 routeSubject，然后在 ngOnInit 中订阅了路由参数 paramMap。每当 paramMap 发生变化时，我将最新的路由参数使用 next 方法推送到了 routeSubject 中。

2. 手动刷新页面

如果第一种方法无效，最简单的解决方案是手动刷新页面。虽然这不是最好的用户体验，但在这种情况下，这是一个可行的解决方案。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  constructor(private router: Router) { }

  navigateTo(url: string) {
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
      this.router.navigate([url])
    ); 
  }
}

在上面的代码中，我在 navigateTo 方法中使用了 Router 的 navigateByUrl 和 navigate 方法。skipLocationChange 参数用于在不改变 URL 的情况下导航路由。

3. 重复路由

在我的研究中，我发现我所遇到的问题是由于重复路由导致的。如果两个路由的路径相同，但参数不同，Angular 就不会视为两个不同的路由。因此，路由参数的变化不会导致页面内容的刷新。

为了解决这个问题，一个简单的解决方案是在路由路径后添加一个随机参数，以确保每个路由都是唯一的。

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExampleComponent } from './example/example.component';

const routes: Routes = [
  { path: 'example/:id', component: ExampleComponent },
  { path: 'example/:id/:random', component: ExampleComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的代码中，我在路由路径后添加了一个名为 random 的随机参数。这样做确保了每个路由都是唯一的，即使它们的路径相同。

结论

以上是我在研究 Angular 8 动态路由不更新页面内容时所得出的解决方案。如果遇到类似的问题，你可以尝试这些解决方案，并选择其中一个来解决它。无论你选择哪个方案，都要确保它符合你的应用程序需求，并提供最好的用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654bc9667d4982a6eb5925c8