Angular 在get（）set（）方法中，即使在重新加载页面后也显示对象属性

我有两个名为list和home的组件，我将在list组件中显示一些名为contacts的数组对象，如下所示

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

然后，我将被路由到主组件，我将使用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);
  }

}

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

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

服务文件

当我第一次路由时，我能够显示单击的对象，但如果我刷新页面，我无法显示对象，对象将变得未定义，即使刷新pagehome，我如何显示对象

---

我认为您需要使用浏览器缓存或cookie来记住最近选定的单击对象，甚至需要在服务器端存储此数据

也可以考虑使用这样的真实吸气剂和设定器：

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

}

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

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

---

变量存储在内存中，在刷新网站后丢失。 使用cookies在客户机上存储信息

安装：

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');
}

---

以下是使用ngOnchange的完整指南。刷新是指从浏览器刷新整个网站，还是仅导航到不同的组件？刷新整个网站。然后需要使用例如localStorage。如果您刷新应用程序，则所有数据都将丢失。请考虑接受其中一个答案，如果这些答案不满足您的要求，请继续循环并指出您仍然缺少的内容。