Question

我有两个分别称为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文件

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

变量存储在内存中，并且在刷新网站后丢失。使用Cookie将信息存储在客户端计算机上。

安装：

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来记住最近选择（单击）的对象，甚至将其存储在服务器端。

另外，考虑使用这样的“真实” getter和setter：

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

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

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

2 个答案: