typescript - Nesne verisi ile yeni bir Angular sekmesi açmak?

Angular 7 kullanıyorum ve nesne verileriyle yeni bir Angular sekmesi açmak istiyorum. Kullanıcı butona tıkladığında, nesne verileri gönderilecek ve verilerle yeni bir sekme açılacak.

Bunun için 3 şey denedim.

  1. 'window.open()' kullandım. Yeni bir sekme açabilirdim ama büyük verileri, örneğin bir nesne verisini, gönderemedim.

let win=window.open('test-child', '_blank');

win.document.getElementById('text1');

  1. Ben de Router kullandım. Ancak yeni bir sekme açamadı. Sadece URL'ye yönlendiriyor.

this.router.navigate(['test', obj]);

  1. Veri servisini kullandım. Veri servisi yaptım ve içinde setValue ve getValue var. Ancak, alt bileşen veriyi alamadı.

örnek) data.service.ts

private _data = {};

setValue(value) { this._data = value; }

getValue() { return this._data;}

test.ts

obj = { name: 'pat', age: 30 };

openNewTab() { 
    this.data.setOption(this.obj); 
    windows.open('test-child', '_blank');
}

test-child.ts

data: any;

constructor(private dataService: DataService) {}

ngOnInit() { this.data = this.dataService.getValue(); }

Peki bu durumda, Angular'da yeni bir bileşen sekmesini açmak için nesne verilerini nasıl gönderebilirim? Lütfen biri yardımcı olsun.

Cevap #1

localStorage kullanarak verileri birden fazla sekme arasında paylaşabilirsiniz.

localStorage'da saklanan veriler, açıkça silinene kadar kalır. Yapılan değişiklikler kaydedilir ve sitenin mevcut ve gelecekteki tüm ziyaretleri için kullanılabilir olur.

window.open() öncesinde öğeyi localStorage'a aşağıdaki gibi ayarlayabilirsiniz

let data = {name : 'test' };
localStorage.setItem('object', JSON.stringify(data));

ve yeni bir sekme açıldığında veri nesnesini kullanarak alabilirsiniz

let data = JSON.parse(localStorage.getItem('object'));

Not: Hassas verileri localStorage'da saklamayın.

Bu, aynı kaynak politikası üzerinde çalışır. Yani, saklanan veriler sadece aynı kaynakta kullanılabilir olacaktır.