Question

场景：：我有一个名为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>

TS

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的另一个组件，在那里我将通过执行contact操作来更新选择的PUT，然后再次刷新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之后，也是如此：

Answer 1

刷新页面后，所有信息都不会保留，

一种配置路由的方法。

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

]

使用已激活的路线第一个孩子参数，您可以阅读ROUTE相关的任何信息。

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

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

1 个答案: