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

Question

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

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

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

一秒钟后简单地转到这条路线：http://localhost:4200/# and from that page to http://localhost:4200/welcome

我不知道为什么会这样，描述我的问题的最近的工单在这个 link 但仍然有点不同，因为我在组件内进行路由。

这是我导航的代码：

 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) 的方法，returns 一个简单的模型，应该填充到 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>

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

Angular Routing multiple paths with different parameters and same component

angular

angular-routing

angular-router

angular-module