Angular：如何在url中隐藏参数？

Question

在这里，我modeling-agency component在这个组件中有一个用于路由的按钮，editModelingAgency/{{elememt.userid}}单击该按钮，该特定用户和链接上的链接路由看起来像这样，/base/editModelingAgency/15但我想显示这样的链接/base/editModelingAgency并隐藏参数，这怎么可能？

建模-agency.component.html

<ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef> Action </th>
   <td mat-cell *matCellDef="let element">
     <button mat-raised-button routerLink="/base/editModelingAgency/{{element.userid}}"></button>
   </td>
 </ng-container>

app-routing.modulets

const routes: Routes = [
 { path: '', redirectTo: 'login', pathMatch: 'full' },
 { path: 'login', component : LoginFormComponent },   
 { path : 'base', component : BaseComponent,canActivate : [AuthguardGuard],canActivateChild : [AuthguardGuard],runGuardsAndResolvers: 'always',
  children: [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },    
   { path: 'dashboard', component : DashboardComponent },
   { path: 'modelingAgency', component : ModelingAgencyComponent },
   { path: 'editModelingAgency/:userid', component : EditModelingAgencyComponent },  
 ]},
   { path: '**', component : PageNotFoundComponent },   
];

Answer 1

您必须做一些事情：

1. /:userId从您的子路线中删除editModelingAgency。
2. 创建一个服务，该服务将获取并设置要编辑的用户的 userId。
3. 将服务注入您的EditModelingAgencyComponent（获取）和您的ModelingAgencyComponent（设置）中

不过，还有一些注意事项，其中最重要的一点是，如果用户直接降落在路线上，您将无法支持/base/editModelingAgency。话虽这么说，这是一个代码，例如：

你的SharedService：

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable()
export class SharedService {

  private userId;

  set userToEdit(userId) {
    this.userId = userId;
  }

  get userToEdit() {
    return this.userId;
  }

}

你的ModelingAgencyComponent班：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { SharedService } from '../shared.service';

@Component({...})
export class ModelingAgencyComponent {

  constructor(
    private router: Router,
    private sharedService: SharedService
  ) {}

  navigateToEdit() {
    this.sharedService.userToEdit = 15;
    this.router.navigate(['/base/editModelingAgency']);
  }

}

您的ModelingAgencyComponent模板：

<ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef> Action </th>
   <td mat-cell *matCellDef="let element">
     <button mat-raised-button (click)="navigateToEdit()"></button>
   </td>
 </ng-container>

你的EditModelingAgencyComponent班：

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({...})
export class EditModelingAgencyComponent implements OnInit {

  userIdToEdit;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.userIdToEdit = this.sharedService.userToEdit;
    console.log(`Got the userId to edit as : ${this.sharedService.userToEdit}`);
  }

}

您可以参考此示例 StackBlitz的任何参考。

Answer 2

是的，您可以使用某些服务从单击链接的位置保存所选项目，然后再路由到 editModelingAgency 路由并在加载时将其加载到 EditModelingAgencyComponent 组件中。

另一种方法是在某些本地存储中设置选定的 id，以便您可以在 EditModelingAgencyComponent 中使用该值。