Question

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

modeling-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

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

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

Answer 2

您需要做的几件事：

从您的/:userId子路线中删除editModelingAgency。
创建一个服务，该服务将获取并设置用户的userId以进行编辑。
在您的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}`);
  }

}

您可以参考Sample StackBlitz以获得任何参考。

Answer 3

您只需添加

 skipLocationChange: true

Answer 4

您不能在url中的组件之间传递数据并隐藏参数，而必须使用另一种方式（例如，使用服务）。

请检查此https://stackoverflow.com/a/48763597/10057411

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

4 个答案: