Question

我尝试使用不同的参数路由到相同的路由，并获得了一定程度的成功。

问题是我成功到达了路由，但是在瞬间，它无缘无故地将我重新路由到欢迎页面，控制台中没有错误代码或警告，也没有。

路线显示如下：http://localhost:4200/UpdateStatement/1/copy/true

一秒钟之后，便简单地转到以下路线：http://localhost:4200/#并从该页面到达http://localhost:4200/welcome

我不知道为什么会发生这种情况，最接近描述我的问题的票证在此链接上，但由于我正在组件内进行路由，因此仍然有些不同。

Route to Same component with multiple Params

这是我导航的代码：

 onKopirajClick(k) {
    this.id = k.data.id;
    this.router.navigate(['updateStatement', this.id, 'copy', true]);
  }

这是目的地：

ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    const isCopy = this.route.snapshot.paramMap.get('isCopy');
    this.route.paramMap.subscribe(params => {
      console.log(params);
      const statementId= +params.get('id');
      const copy = params.get('isCopy');
      this.getStatement(statementId);
    });

这是getStatement（statementId）的方法，返回一个应填充到HTML页面输入中的简单模型：

getStatement(id) {
    if (id != null && id > 0) {
      this.statementService.getUpdateStatement(id).subscribe({
        next: statement => {
          this.updateStatement= statement;         
          }
        },
        error: err => this.errorMessage = err
      });
    } 
  }

这些是我的语句模块中的路径：

@NgModule({
  declarations: [
    UpdateStatementComponent,
    UpdateStatementListComponent,
    UpdateStatementSearchComponent   
  ],
  imports: [
    DevExtremeModule,
    RouterModule.forChild([
        {path: 'updateStatement', component: UpdateStatementComponent, pathMatch: 'full'},
        {path: 'updateStatement/:id', component: UpdateStatementComponent, pathMatch: 'full'},
        {path: 'updateStatement/:id/copy/:isCopy', component: UpdateStatementComponent, pathMatch: 'full'},
        {path: 'updateStatementList', component: UpdateStatementListComponent},
        {path: 'updateStatementList/:isSaved', component: UpdateStatementListComponent},
        {path: 'updateStatementSearch', component: UpdateStatementSearchComponent}
    ]),
    SharedModule
  ]
})

这是显示欢迎页面的共享主模块：


@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    RouterModule.forRoot([
      { path: 'welcome', component: WelcomeComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
      { path: '**', redirectTo: 'welcome', pathMatch: 'full' } // 404 page
    ]),
    UpdateStatementsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

如果需要其他任何代码进行分析，请告诉我，因为我不太确定该在哪里查看。

Answer 1

我设法找到了问题，问题是模板中的按钮导航到了正确的路线，但是按钮之前的定位标记始终不断地重新路由到不存在的路线。一旦我从代码中删除了<a href="#">，它就像一个魅力。

<div *dxTemplate="let d of 'kopirajIzjavuTemplate'">
     <a href="#">
       <dx-button
        icon="copy"
        hint="Kopiraj"
        (click)="onKopirajClick(d)">
      </dx-button>
      </a>
</div>

角路由具有不同参数和相同组件的多条路径

1 个答案: