Angular 刷新的路由问题

Question

此处：https://stackblitz.com/edit/planificador?file=src/app/partehoras/components/detail/detail.component.html

第一个加载的路由就是这个

在 app.module 我有这个

在 partehoras.module 我有这个

当我点击这里时

我走这条路

但是当我刷新这个页面时，我又回到了这个页面

有什么想法吗？

谢谢

Answer 1

主要问题在main.component.ts:

@Component(...)
export class MainComponent implements OnInit {
  ...

  ngOnInit(): void {
     ...;

     this.sharedDataService
      .getEmpleado(this.empleadoID)
      .pipe()
      .subscribe(data => {
          
          this.nombreEmpleado = data.nombre;

          console.log('Empleado', this.nombreEmpleado);

          this.router.navigate(['/partehoras', this.empleadoID]); // Problem here!
        },
        err => console.log(err),
        () => {})
  }
}

现在，为什么这条线有问题？

Angular 开始在您的应用程序中加载组件并解析它们的路由。这些组件之一是 MainComponent，它是您拥有的 ngOnInit 方法：

this.router.navigate(['/partehoras', this.empleadoID]);

这意味着一旦订阅发出信息，如果该组件出现在屏幕中，您将执行重定向。

由于此组件通过 <router-outlet></router-outlet> 包含 DetailComponent 这意味着当您要加载 DetailComponent 时，您必须始终先通过它。

在正常导航下这不是问题，但是当我们刷新时，我们会触发 ngOnInit 方法，这会阻止我们到达 DetailComponent.

没有简单的解决方法。问题是您在 ngOnInit 方法中执行重定向，这通常是一种糟糕的方法。每次创建组件时，都会发生重定向。这包括刷新事件和可能的正常导航之外的其他类型。

解决方案

我会考虑创建一个守卫来检查何时需要重定向。但是，这取决于您的应用程序的逻辑，因为在这种情况下，所以我帮不上什么忙。

Angular 刷新的路由问题

Angular Routing problems with Refresh

angular-routing

angular

angular-router

angular-routerlink