添加记录后显示空列表

Question

我有一个页面显示使用 http 服务检索的项目列表，以及一个用于添加新项目的按钮。添加新服务后，我以编程方式导航到第一页，但现在未调用该服务并且列表为空。

自行车类型组件

@Component({
    selector: 'app-bike-types',
    imports: [
      MatListModule, 
      FormsModule, 
      ReactiveFormsModule,
      MatButtonModule,
      MatIconModule
    ],
    template: `
      <form [formGroup]="form">
        <mat-selection-list #bikeTypesSelectionList [formControl]="bikeTypesControl" name="bikeTypesList" [multiple]="false">
          @for (bikeType of bikeTypesList; track bikeType) {
            <mat-list-option [value]="bikeType.id">{{bikeType.name}}</mat-list-option>
          }
        </mat-selection-list>
      </form> 
    `
})
export class BikeTypesComponent {
    auth = inject(Auth);
    private router = inject(Router);
    bikeTypesList: BikeType[] = [];
    bikeTypeService: BikeTypeService = inject(BikeTypeService);
    form: FormGroup;
    bikeTypesControl = new FormControl();

    constructor() {
        this.form = new FormGroup({});
    }
    ngOnInit() {
        this.bikeTypeService.getAll()
            .subscribe({
                next: (data) => {
                    this.bikeTypesList = data;
                },
                error: (err) => {}
            });
        this.form = new FormGroup({
            bikeTypesList: this.bikeTypesControl
        });
    }
    navigateToRoute(route: string) {
        this.router.navigate([route]);
    }    
}

并且，在保存新的 BikeType 后，在

addBike

的组件代码中，我使用它导航回自行车类型页面：

this.router.navigateByUrl('bike-types');

或：

this.router.navigate(['bike-types']);

结果相同：自行车类型列表未加载。加载和显示它的唯一方法是使用主菜单导航到页面，最终使用此模板代码：

<a mat-list-item [routerLink]="bike-types">

Answer 1

你可以尝试下面的代码吗：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatListModule } from '@angular/material/list';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { Router, NavigationEnd } from '@angular/router';
import { BikeTypeService } from './bike-type.service';
import { BikeType } from './bike-type.model';
import { Auth } from './auth.service';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-bike-types',
  imports: [
    MatListModule, 
    FormsModule, 
    ReactiveFormsModule,
    MatButtonModule,
    MatIconModule
  ],
  template: `
    <form [formGroup]="form">
      <mat-selection-list #bikeTypesSelectionList [formControl]="bikeTypesControl" name="bikeTypesList" [multiple]="false">
        <mat-list-option *ngFor="let bikeType of bikeTypesList" [value]="bikeType.id">{{bikeType.name}}</mat-list-option>
      </mat-selection-list>
    </form> 
  `
})
export class BikeTypesComponent implements OnInit {
  auth = inject(Auth);
  private router = inject(Router);
  bikeTypesList: BikeType[] = [];
  bikeTypeService: BikeTypeService = inject(BikeTypeService);
  form: FormGroup;
  bikeTypesControl = new FormControl();

  constructor() {
    this.form = new FormGroup({});
  }

  ngOnInit() {
    this.loadBikeTypes();

    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      if (event.urlAfterRedirects === '/bike-types') {
        this.loadBikeTypes();
      }
    });

    this.form = new FormGroup({
      bikeTypesList: this.bikeTypesControl
    });
  }

  loadBikeTypes() {
    this.bikeTypeService.getAll()
      .subscribe({
        next: (data) => {
          this.bikeTypesList = data;
        },
        error: (err) => {}
      });
  }

  navigateToRoute(route: string) {
    this.router.navigate([route]);
  }
}

当发生 NavigationEnd 事件时，检查 URL 是否为

/bike-types

。检查完毕后，调用loadBikeTypes方法重新加载数据。我已将数据加载逻辑移至单独的 loadBikeTypes 方法中，以便可以在 ngOnInit 中以及重新输入路线时调用它，而无需重复代码。这可以确保当您导航回

/bike-types

路线时，无论是通过编程方式还是通过主菜单，都会重新加载列表。