Angular : how to hide parameter in url?

Question

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

建模机构.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. 从 editModelingAgency 子路由中删除 /:userId。
2. 创建一个服务，用于获取和设置要编辑的用户的 userId。
3. 在您的 EditModelingAgencyComponent(获取)和 ModelingAgencyComponent(设置)中注入(inject)服务

但也有一些警告，最重要的是，如果用户直接登陆 /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}`);
  }

}

可以引用这个Sample StackBlitz对于任何引用。