角度导航到具有不同参数的同一路线

Question

尽管这个问题以前似乎已经出现过，但我找不到适合我的答案，因为路由器在整个角度的使用期内似乎已经发生了很大变化。

在角度5中，我有一个要编辑用户的组件。我使用以下代码导航到该组件：

this.router.navigate(['editsingleuser',user.username])

它将把我发送到/ editsingleuser / bob

然后，在该组件中，我还可以单击一个按钮来编辑我自己的用户详细信息，该用户使用以下代码：

this.router.navigate(['editsingleuser',this.user.sub])

哪个应将我发送到/ editsingleuser / joe，但不发送

我是否可以在router.navigate中添加一个参数，以强制它加载路由，因为它似乎在进行某种缓存？

我也尝试使用

[routerLink]="['editsingleuser',user?.sub]" 

也有同样的问题

Answer 1

在 Angular 8 中，可以加载一些其他路由，然后返回到当前活动的路由。试试这个：

this.router.navigateByUrl('/', {skipLocationChange: true})
  .then(()=>this.router.navigate(['editsingleuser',this.user.sub]));

学分：

1. 如何使用 angular 2 路由器重新加载当前路由
2. https://dev.to/oleksandr/mastering-angular-8-five-things-that-are-good-to-know-to-save-your-time-14hk（项目#5：#5。重新加载组件相同的网址导航）

Answer 2

从 5.1 开始，Angular 有一个路由重新加载的设置。这是一个参数叫

onSameUrlNavigation

https://angular.io/api/router/ExtraOptions

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

不过我建议不要使用这种技术。

当您导航到同一路线时，Angular 的默认行为不会重新加载路线。这是一个很好的故障保险，它是有道理的。

但是，如果您要更改参数，则可以订阅参数更改并相应地执行以下操作，例如：

@Component({
  selector: 'app-custom-edit',
  templateUrl: './custom-edit.component.html',
  styleUrls: ['./custom-edit.component.scss']
})
export class CustomEditComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(res => {
      if (+res.id === 0) this.initNew() // 'id' here is an example url parameter
      else this.initExisting(+res.id)
    })
  }

  initNew() {
    //..
  }

  initExisting(id: number){
    //..
  }
}

并且，相应地，您可以根据参数实际情况处理组件的设置或重置。把它当作你的工作，而不是路由器的工作。此触发器将在第一次初始化时以及使用不同参数导航到相同 url 时触发。

至少，它比重新加载整个路线更有效率。

Answer 3

我遇到了同样的问题，这在我的情况下解决了

constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };
  }

Answer 4

这个问题的答案是我必须在EditSingleUser组件中订阅route参数，并在获取页面数据时使用此值。

在ngOnInit（）中

this.route.params
  .switchMap((p: Params)=>{
      let usr = p['username']; //read the username route parameter
      return this.apiService.getUser(usr)}      //call getUser with that parameter
        )
  .subscribe(data=> {
    this.user= data
    console.log("data :" + JSON.stringify(data));
    this.setupFormData();          //use the resulting data to set up the form
  })