javascript - angular 8'de rotalar arasında veri nasıl paylaşılır

Bir JSON verim var ve bu, Üst bileşende döndürüldüğünde elde ediliyor. Yapmanız gereken tek şey, Üst bileşene "12233" veya "34567" sayılarını girmek ve verilerin konsolda yazdırıldığını görebilmek.

Çocukta olduğu gibi, Veri kullanarak Parent'ten {{firstName}} yazdırmak istiyorum.

Veri öznitelikleri, burada stackblitz'teki gibi yollar kullanılarak Çocuk bileşene geçirilebilir mi?

Ebeveyn: 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 });
  }

}

Veri.JSON:

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

Çocuk: HTML:

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

Stackblitz

Cevap #1

Tabii, örneğinizdeki gibi çalışıyor.

Değeri şöyle bir queryParam olarak gönderin:

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

Ve sonra çocuk rotada bunu şöyle al:

public firstName?:string;

constructor(
  private activatedRoute:ActivatedRoute
) { }

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

İşte çalışan StackBlitz.

Nesneleri Geçme

Eğer bir Nesne geçirmek istiyorsanız, en iyi yol nesneyi bir serviste tutmak ve sadece yukarıdaki yöntemle benzersiz bir tanımlayıcıyı geçirmektir. Eğer bir Durum Yönetim Kütüphanesi kullanıyorsanız, Nesnenizi serviste tutmak yerine orada tutmalısınız.

Bunu örneğinizle göstermek için başka bir StackBlitz yaptım (kodları biraz temizledim, böylece görmek daha kolay olsun).