Question

我尝试使用ngOnChanges保留之前选择值时选择的选项，然后我返回上一个路径，但所选选项默认返回None。如何跟踪切换路线之间最近选择的选项？

这是我的代码：

选择视图：

<mat-select placeholder="Choose a pair" [(ngModel)]="selectedValue" 
  (ngModelChange)="emit($event)">
  <mat-option>--None--</mat-option>
  <mat-option *ngFor="let token of tokens" [value]="token.id">
    {{token.name}}
  </mat-option>        
</mat-select>

<a *ngFor="let token of tokens" [routerLink]="['/tokens/', token.id]">
  <span *ngIf="selectedValue===token.id">
    More about {{token.name}}
  </span>          
</a>

选择组件：

selectedValue: any;
tokens: any;

  constructor(
    private apiService: ApiService,
    private sharedService: SharedService
  ) {
  }

  ngOnInit() {
    this.loadTokens();
  }

  ngOnChanges() {
    if (this.selectedValue) {
      this.selectedValue = this.tokens.find(i => i.id === this.selectedValue.id
        && i.name === this.selectedValue.name);
    }
  }

  emit(selectedValue) {
    this.sharedService.pair.next(selectedValue);
  }

  loadTokens() {
    this.apiService.getTokens()
    .subscribe((data: any) => {
      this.tokens = data;
    }, error => {
      console.log(error);
    });
  }

Answer 1

当您离开时，您的组件将被销毁。这意味着你拥有的任何变量都会被它破坏。

要保留值，您可以使用服务，也可以使用本地/会话存储。

（我建议使用服务，但这是我的个人意见）。

顺便说一句，ngOnChanges仅适用于输入（@Input），我非常怀疑您将在路由组件中输入。

角度材料2 - 如何在切换路线时保持选择垫子选项？

1 个答案: