在组件刷新后突出显示选定的项目答案

【问题标题】：To highlight selected item after component refresh在组件刷新后突出显示选定的项目
【发布时间】：2019-08-22 05:26:09
【问题描述】：

场景：我有一个名为list 的组件，它在列表中显示所有customers。在这个列表中，我写了这样的条件：

1) 默认情况下，第一个 list-item(Ex customer 1) 将被选中，选中的 list-item(Ex customer 1) 将被发送到另一个名为 display 的组件。

2) 然后在单击任何list-item(i,e customer) 时，选定的列表项也会发出display 组件。如下图所示：

联系人列表组件代码：

HTML

<mat-selection-list>
    <mat-list-option [ngClass]="{selected : currentContact && contact.Name == currentContact.Name}" *ngFor="let contact of contacts">
           <a mat-list-item (click)="onSelect(contact)">{{ contact.Name }} </a>
    </mat-list-option>
</mat-selection-list>

import { Component Input,EventEmitter,Output} from '@angular/core';
import { ICustomer} from 'src/app/models/app.models';
import { CustomersService } from 'src/app/services/customers.service';

@Component({
  selector: 'drt-customers-list',
  templateUrl: './customers-list.component.html',
  styleUrls: ['./customers-list.component.scss'],
})
export class CustomerListComponent {
 public customers:  ICustomer[] ;
   public currentContact: IContact;
 @Output()
 public select = new EventEmitter();

 constructor(public customersService: CustomersService,) {}

  public async ngOnInit(): Promise<void> {
    this.customers = await this.customersService.getCustomersList('');
    this.customerRefreshed();
  }

   public ngOnChanges(changes: SimpleChanges): void {===>To emit 1st contact by default
    if (this.contacts && this.contacts.length > 0) {
    this.currentContact = this.contacts[0];
    this.select.emit(this.currentContact);
    }
   }

  public customerRefreshed() { ====> To refresh the list after updating
    this.customersService.customerUpdated.subscribe((data: boolean) => {
        if(data) {
            this.customers = await this.customersService.getCustomersList('');
        }
    });  

  }

  public onSelect(contact: IContact): void {===> To emit contact on click
    this.select.emit(contact);
  }


}

现在我有另一个组件到update the contacts，我将通过执行PUT 操作更新选定的contact，然后我将再次刷新contact-list。查看更改。

更新联系人组件代码：

public updateCustomer(): void {
    this.someCustomer = this.updateForm.value;
    this.customersService.UpdateCustomer(this.someCustomer, this.someCustomer.id).subscribe(
      () => {  // If POST is success
        this.customersService.customerUpdated.next(true);
        this.successMessage();
      },
      (error) => {  // If POST is failed
        this.failureMessage();
      }
    );
  }

服务文件：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ICustomer} from 'src/app/models/app.models';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})

export class CustomersService {
 private  baseUrl : string = '....Url....';
 public  customerUpdated: Subject<boolean>;


  constructor() {
    this.customerUpdated = new Subject<boolean>();
 }

  public async getCustomersList(): Promise<ICustomer[]> {
    const apiUrl: string = `${this.baseUrl}/customers`;
    return this.http.get<ICustomer[]>(apiUrl).toPromise();
 }

  public UpdateCustomer(customer: ICustomer, id: string): Observable<object> {
     const apiUrl: string = `${this.baseUrl}/customers/${id}`;
     return this.http.post(apiUrl, customer);
  }

}

现在的问题，假设如果我select/click第二个list-item(Customer 2)更新，那么更新后list-item(Customer 1)被默认选中如下：

但更新后之前点击的list-item(Customer 2)必须再次处于selected状态，即使在像这样刷新list之后：

【问题讨论】：

你如何配置你的路线
list 和 display 组件之间没有路由，list 和 display 都是另一个名为 customer 的组件的子组件。
你能提供一个stackblitz吗？以便于测试。

标签： angular typescript angular6 angular-services

【解决方案1】：

刷新页面后不会保留任何信息，

您可以通过一种方式来配置您的路线，例如。

[{path:'list',component: ListComponent},
 chilren[
 {path:'list/:id',component: DetailsComponent}]

]

使用 Activated route firstchild 参数，您可以读取 ROUTE 相关的任何信息。

第二种方式：使用本地存储

【讨论】：