Question

我有一张表格。当用户开始输入时，会自动保存并返回id。我用这个id来更新网址。

所以在我们开始输入之前，url是/ arende并且表单后面的modell被实例化为空。完成第一次保存并返回id后，url将更新为/ arende / 666，其中666是使用location.go（）的id。

当我想要“重置”表单时出现问题，我想导航回/ arende并通过这样做，重置modell。

这不起作用，在这一点上，navigateByUrl似乎没有做任何事情。如果我打开我的浏览器，其ID已经在url ie / arende / 123中然后按navigateByUrl它可以工作，但不能在使用location.go之后。

下面的stackblitz里面有几个模拟不同东西的按钮。第一个按钮仅为此演示重置表单。

第二个按钮模拟表单中的更改，即使用location.go更改网址为/ arende / 666.

第三个按钮是我想要工作的按钮，因此在使用第二个按钮后，我想使用第三个按钮进行真正的导航，以便重置表单和模型。

第四个按钮只是演示了如果我使用navigateByUrl而不是location.go它会看起来如何，它会在用户更改不可接受的表单时获取对象并显示加载器。

第五个按钮是当前的临时解决方案，其中我有一个名为“new”的特殊ID，我点击了location.go后导航到该ID。这会触发导航，但在感知到“new”关键字时会中断，并且会执行另一个navigationByUrl到/ arende。

总结一下。当用户在表单中输入时，我想对url / arende / 666进行不可察觉的更改。后来我想通过导航到/ arende来重置表单。

这是一个stackblitz：https://stackblitz.com/edit/angular-wwknbk

应用程序组件：

export class AppComponent implements OnInit {
  name = 'Angular 5';
  constructor(
    private router: Router,
    private location: Location
  ){}

  ngOnInit(){

  }

  locationgo(){
    let url = this.router.createUrlTree(['arende/666']).toString();
    this.location.go(url);
  }

  navigate(){
    console.log('this.router.navigateByUrl("/arende")');
    this.router.navigateByUrl("/arende");
  }

  navigateWithLoader(){
    console.log('this.router.navigateByUrl("/arende/666")');
    this.router.navigateByUrl("/arende/666");
  }

  tempSolution(){
    this.router.navigateByUrl("/arende/new");
  }
  reset(){
    window.location = "/";
  }
}

应用程序组件html：

<app-spinner name="global"></app-spinner>
<router-outlet></router-outlet>
<hello name="{{ name }}"></hello>

<button (click)="reset()">reset location</button>

<button (click)="locationgo()">location.go(/arende/666)</button>

<button (click)="navigate()">router.navigateByUrl(/arende)</button>

<button (click)="navigateWithLoader()">router.navigateByUrl(/arende/666)</button>

<br/>
<br/>
<br/>

<button (click)="tempSolution()">temp solution router.navigateByUrl(/arende/new)
</button>

路由：

import { NgModule } from '@angular/core';
import { CommonModule, APP_BASE_HREF } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ArendeComponent } from './arende.component';


const routes: Routes = [
  { path: 'arende', component: ArendeComponent },
  { path: 'arende/:id', component: ArendeComponent },
  { path: '',
    redirectTo: '/arende',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: [],
  providers:[{provide: APP_BASE_HREF, useValue : '/' }]
})
export class AppRoutingModule { }

Arende组件

@Component({
  selector: 'app-arende',
  template: '<div>arendekomponent id: {{arende.arendeId}}</div>'
})
export class ArendeComponent implements OnInit {
  public arende:Arende = new Arende();
  constructor(
    private router:Router,
    private route: ActivatedRoute,
    private spinnerService:SpinnerService,
    private restService:RestService
  ) { }

  ngOnInit() {
    debugger;
    if(this.route.snapshot.params.id != null){
      if(this.route.snapshot.params.id == "new"){
        this.router.navigateByUrl("/arende");
      }else{
        this.spinnerService.show("global", "Fetching arende");
        this.route.params.switchMap((params:Params) => this.restService.getArende(params["id"]))
        .subscribe(arende => {
          this.spinnerService.hide("global");
          this.arende = arende
        });

        console.log(this.route.params);
      }
    }else{
      this.arende = new Arende();
    }
  }

}

Answer 1

作为docs州

注意：最好使用路由器服务来触发路由更改。仅当您需要在路由之外进行交互或创建规范化URL时才使用位置。

使用location.go时，角度的路由器状态不会更新。所以发生的事情是路由器状态最初是/arende。然后使用location.go，网址更新为/arende/666，但路由器状态仍为/arende。因此，一旦尝试使用router.navigateByUrl('/arende')，它就不起作用，因为有角度仍然认为它在/arende上，因此它不会更新网址。

您可以在stack blitz的这个分叉版本中看到这一点。我已经安排了arende.component中路由器的url更改。使用location.go

时，您可以看到observable不会触发

Answer 2

我找到了这个有用的代码：

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

使用location.go后，我仍然无法导航到/ isnde。但是现在我可以浏览ToUrl到/它反过来有一个重定向到/ arende。如果没有这个代码，就不可能将toTrUrl导航到/，因为重定向指向/ arende，这是路由器的当前状态。

不完全确定此代码是否超过此代码。我还没有注意到任何副作用。

Answer 3

在以下情况下使用“ @ angular / router”的ActivedRoute

this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
    this.orgId = params.get('id');
    //business logic what changes you want on the page with this new data.
});

每次必须订阅，因为url相同，只是参数在更改

将此代码放入您的ngOnInit中通过快照，更改URL中的路径参数时不会发生重新加载，因为未调用构造函数。但是使用订阅，它将监听参数中发生的更改。

Answer 4

我们可以通过在看到相同的URL时启用重新加载来解决此问题。只需添加

{onSameUrlNavigation : 'reload'}

到您的应用模块

使用location.go

4 个答案: