Angular 18同页面不同状态重载异常：首次无响应二次才生效

你的核心问题出在错误的路由配置参数使用和组件未监听路由状态变化两方面，具体修正步骤如下：

1. 修正全局路由配置 #

onSameUrlNavigation: 'reload'是Angular路由的全局配置项，不能写在navigateByUrl的导航参数里，需要在RouterModule.forRoot中设置：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PdfViewerComponent } from './pdf-viewer/pdf-viewer.component';

const routes: Routes = [
  // 其他路由...
  { path: 'pdfViewer', component: PdfViewerComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload' // 全局开启同URL重载
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 给目标路由添加重载触发配置 #

在/pdfViewer路由中设置runGuardsAndResolvers: 'always'，确保同URL导航时会重新触发组件的生命周期钩子或解析器：

// app-routing.module.ts 中的路由配置
{
  path: 'pdfViewer',
  component: PdfViewerComponent,
  runGuardsAndResolvers: 'always' // 强制每次导航都运行守卫和解析器
}

3. 组件内监听路由状态变化 #

如果你的PdfViewerComponent只在ngOnInit中读取一次路由状态，同URL重载时组件不会重新初始化，也就无法获取新状态。需要监听路由导航事件，每次导航结束后读取最新状态：

// pdf-viewer.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { FormFavoriteElement } from 'your-path-to-interface';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.css']
})
export class PdfViewerComponent implements OnInit {
  constructor(private router: Router) { }

  ngOnInit(): void {
    // 监听每次导航结束事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 获取最新的路由状态
      const navigation = this.router.getCurrentNavigation();
      if (navigation?.extras.state) {
        const { pdfdata, data } = navigation.extras.state as {
          pdfdata: any;
          data: FormFavoriteElement;
        };
        // 处理新状态数据，更新组件视图
        this.handleFormData(pdfdata, data);
      }
    });
  }

  private handleFormData(pdfdata: any, form: FormFavoriteElement): void {
    // 这里写你的业务逻辑，比如渲染PDF、设置表单数据等
  }
}

4. 调整导航代码（可选） #

如果不需要隐藏URL变化，可以去掉skipLocationChange: true，这样浏览器历史会记录每次导航，也更容易调试。replaceUrl: true会替换当前历史记录条目，可根据业务需求保留：

openForm(form: FormFavoriteElement) {
  form.createDraft = true;
  this.formDataService
    .getFavouriteFormContent(form.acroContentId, 'acro')
    .subscribe((result) => {
      this.router.navigateByUrl('/pdfViewer', {
        replaceUrl: true, // 根据需求保留
        state: {
          pdfdata: result,
          data: form,
        },
      });
    });
}

关于路由状态清除 #

不需要手动清除路由状态，只要确保每次导航时传入新的state对象，并且组件能正确读取最新状态即可。之前的旧状态残留问题，本质是组件未重新初始化或未监听状态变化导致的。

内容的提问来源于stack exchange，提问作者Valentina Maronese