router.navigateByUrl 不发送值 Angular

Question

我正在尝试在组件 Angular 之间发送 1 个值...但是当我到达我的组件时，我什么也没有收到。

组件1：

onCellClicked(event) {
    if (event.colDef.field === 'dni') {
      console.log('dni en mi componente : ', event.value);
      this.router.navigateByUrl('probarborrar/', event.value);
    }
  }

首先检查Cell是否为dni，然后我显示"console.log(event.value)"是真的，我可以看到我的dni。最后我去第二个组件。

路由。

     {
        path: 'probarborrar/:idUser',
        component: ProbandoBorrarComponent,
        data: {
          breadcrumb: 'probar'
        }
      }

组件2。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-probando-borrar',
  templateUrl: './probando-borrar.component.html',
  styleUrls: ['./probando-borrar.component.scss']
})
export class ProbandoBorrarComponent implements OnInit {
  public dni;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.dni= this.route.snapshot.paramMap.get('idUser');
    console.log('en probando es :', this.dni); -->nothing
  }
}

html

<p style="color:white;background-color:black;">
  probando-borrar works! : {{ dni }}
</p>

我可以到达 Component2，但我什么也没收到。

Answer 1

您应该为此使用navigate 函数。显然navigateByUrl 有一个issue with queryParams。 其次，您需要将navigationExtras 对象传递给navigate 函数。

查看代码示例。

this.router.navigate(['probarborrar'], {queryParams: {idUser: event.value}});

在component2中，检索类似的值

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  this.activatedRoute.queryParams.subscribe((params) => {
      console.log(params['idUser']);
  });
}

工作演示：https://stackblitz.com/edit/angular-ytfgp8

Answer 2

试试这个。

import { map } from 'rxjs/operators';

ngOnInit() {
    this.dni = this.route
      .queryParamMap
      .pipe(map((params) => {
        const param = params.get('idUser');
        console.log(param);
        return param;
      }
      ));
  }

在here 中了解有关路由和导航的更多信息。