javascript - hur man delar data mellan rutter i angular 8

Jag har en JSON-data som returneras när den är i föräldrakomponenten. Allt du behöver göra är att skriva numren "12233" eller "34567" på föräldrakomponenten så kan du se datan skrivas ut i konsolen.

Som i ett barn vill jag skriva ut {{firstName}} från användning av datan från Förälder.

Finns det ett sätt att dataattribut kan skickas till Child-komponenten med hjälp av rutterna som i stackblitzen här

Förälder: HTML:

<button class="btn-thumbnail">type the secret number to pass</button>
<!-- "number": 12233
or
"number": 34567 -->

TS :

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

import data from '../data.json';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor(private router: Router) {
    document.addEventListener('keypress', this.secretNumber);
  }

  typed = '';
  firstName : any = {};

  secretNumber = event =>  {
    this.typed += String.fromCharCode(event.keyCode);
    let eraseData = [];
    let matchedData = {};

    if (this.typed.length == 5) {
      Object.keys(data).length > 0 &&
      data.items && data.items.userdata.map((item, i) => {
        if(item.number == this.typed) {
          matchedData = item;
          console.log(item);
          this.firstName = item.firstName;
          console.log(this.firstName);
          this.goToChild();
          return matchedData;
        }
        if (item.number != this.typed) {
          eraseData.push(item);
        }
        return eraseData;
      });

      if (Object.keys(matchedData).length == 0 && eraseData.length > 0 && this.typed.length == 5) {
        this.typed = '';
      }
    }
  };

  ngOnDestroy() {
    document.removeEventListener('keypress', this.secretNumber);
  }

  ngOnInit() {
  }

  goToChild() {
    this.router.navigate(['/child'], { skipLocationChange: true });
  }

}

Data.JSON:

{
    "items": {
        "userdata": [
            {
                "firstName": "john",
                "lastName": "doe",
        "number": 12233
            },
            {
                "firstName": "mary",
                "lastName": "jane",
        "number": 34567
            }
        ]
    }
}

Barn: HTML:

<p>
child works! {{firstName}}
</p>

Stackblitz

Svar #1

Visst, det fungerar precis som i ditt exempel.

Skicka värdet som en queryParam så här:

goToChild(firstName) {
  this.router.navigate(['/child'], { skipLocationChange: true, queryParams: {firstName} });
}

Och hämta det sedan på child-route på detta sätt:

public firstName?:string;

constructor(
  private activatedRoute:ActivatedRoute
) { }

ngOnInit() {
  this.activatedRoute.queryParamMap.subscribe(paramMap => this.firstName = paramMap.get('firstName'));
}

Här är den fungerande StackBlitz.

Skicka objekt

Om du vill skicka ett objekt är det bästa sättet att hålla objektet i en tjänst och bara skicka en unik identifierare via ovanstående metod. Om du använder ett tillståndshanteringsbibliotek bör du hålla ditt objekt där istället för i tjänsten.

Jag gjorde en annan StackBlitz som visar detta med ditt exempel (jag städade också upp koden lite för att göra det lättare att se).