使用 navigateByUrl() 传递查询参数

Question

我正在尝试通过单击图标导航到新页面，下面是代码

  this.prj = e.data.project_number;
  this.router.navigateByUrl('/dashboard/ProjectShipment/634');

而不是这个硬编码的查询参数 000634 我必须将 this.prj 传递给它。我的路径如下

const appRoutes: Routes = [
  {
  path: 'dB',
  data: { title: 'Dashboard' },
  children: [
      {
          path: 'ProjectShipment/:reportProject',
          component: ProjectShipmentComponent,
          data: { title: 'Project Shipment' },
      }

Answer 1

// Set our navigation extras object
// that passes on our global query params and fragment
let navigationExtras: NavigationExtras = {
  queryParams: {...},
  state: {...}
};

// Redirect the user
this.router.navigateByUrl(redirect, navigationExtras);

NavigationExtras docs

编辑：这也值得一看

Answer 2

您可以使用 'router.navigate' 代替 'router.navigateByUrl':

this.router.navigate([URL],{ queryParams: { id: this.prj });

Answer 3

简单地使用字符串插值

this.router.navigateByUrl(`/dashboard/ProjectShipment/${this.prj}`);

Answer 4

this.router.navigate(['/route1'], { variable1: "Value" }); this.router.navigateByUrl('/route1', { variable1: "Value" });

请none：如果你的url是urlencoded使用navigateByUrl，如果你的url不是urlencoded使用navigate

使用 navigateByUrl() 传递查询参数

Passing query parameter by using navigateByUrl()

javascript

typescript

angular-routing

angular

angular7