Для отображения свойств объекта даже после перезагрузки страницы в методе get () set ()

Question

У меня есть 2 компонента с именами list и home, я буду отображать некоторые объекты массива с именем contacts в list компоненте, как показано ниже.

<div *ngFor="let contact of contacts">
 <mat-card (click)="onClick(contact)" >
    <h4>{{contact.contactName}}</h4>
    <p>{{contact.email}}</p>
 </mat-card>
</div>

Когда я нажимаю наконкретный объект (я, контакт).Я установлю нажатой object, используя set() метод.

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../contacts.service';
import { Router } from '@angular/router';
import { DataService} from '../data.service';
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  contacts = [];
  constructor(private myService: ContactService,
  private router : Router,
  private dataService: DataService,
  ) {}

   ngOnInit() {
    this.myService.getContacts()
      .subscribe((res :[]) => this.contacts = res);
  }
  onClick(contact) {
    this.dataService.setSelectedContact(contact);
    this.router.navigate(['/home']);
  }

}

Затем я направлю компонент home, и я получу доступ к объекту, на который нажали, используя get() метод, подобный этому:

import { Component, OnInit } from '@angular/core';
import { DataService} from '../data.service'

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

  contact: any;
  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.contact = this.dataService.getSelectedContact();
    console.log(this.contact);
  }

}

service file

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {

  selectedContact;
  constructor() { }

  public setSelectedContact(data) {
    this.selectedContact = data;
  }

  public getSelectedContact() : any {
    return this.selectedContact;
  }

}

При первом маршруте я могу отобразить нажатой object, но если я обновляю страницу, я не могу отобразитьobject, объект станет undefined, как я могу отобразить объект даже после обновления страницы (дома)?

DEMO

Answer 1

Переменные хранятся в памяти и теряются после обновления сайта. Используйте куки для хранения информации на компьютере клиента.

Установка:

npm install ngx-cookie-service --save

Импортируйте его в свой модуль:

@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, FormsModule, HttpModule ],
  providers: [ CookieService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

И используйте его в своем компоненте:

export class AppComponent implements OnInit {
cookieValue = 'UNKNOWN';

constructor( private cookieService: CookieService ) { }

ngOnInit(): void {
  this.cookieService.set( 'Test', 'Hello World' );
  this.cookieValue = this.cookieService.get('Test');
}

Вот полное руководство по ngx-cookie-service

Answer 2

Я думаю, что вам нужно использовать кеш браузера или cookie, чтобы запомнить последний выбранный (нажатый) объект или даже сохранить эти данные на стороне сервера.

Кроме того, рассмотрите возможность использования «настоящих» геттеров и сеттеров, например:

public set SelectedContact(value: any) {
    this.selectedContact = value;
  }

  public get SelectedContact() : any {
    return this.selectedContact;
  }