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

您应该为此使用导航功能。 显然navigateByUrl有一个与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;
      }
      ));
  }

在此处阅读有关路由和导航的更多信息。