如何通过 id 获取并导航到另一个组件中的编辑表单

Question

我有一个角度服务，我使用 httpClient，我有两个组件，卡车和编辑卡车，编辑卡车是我应该执行保存或更新操作的地方，但是现在当我从卡车 html 中单击我的编辑按钮时在卡车组件中我没有得到任何响应，我使用表单进行验证，我如何从卡车组件中调用编辑表单组件中的表单，以便我可以使用实体填充表单

service

     getTruckById(truckId: string): Observable<Truck> {
          let cpParams = new URLSearchParams();
          cpParams.set('id', truckId);
         return this.http.get(this.baseUrl + "/" + cpParams)
          .pipe(map(this.extractData),
           catchError(this.handleError));
       }

我的卡车组件

export class TrucksComponent implements OnInit {
  statusCode: number;
  trucks: Observable<Array<Truck>>;

  constructor(private truckService: TruckService, private router: Router) { }

  ngOnInit() {
    this.trucks = this.getTrucksDtos();
  }

    getTrucksDtos() {
       return this.truckService.getTrucks();
      }

  deleteTruck(truck) {
    this.truckService.deleteTruckById(truck.truckId)
      .subscribe(successCode => {
          this.statusCode = successCode;
        //  this.getTrucksDtos();
        },
        errorCode => this.statusCode = errorCode);
  }

  // i should get the truck from the service getbyid here then transfer to edits form
  updateTruck(truckId: string) {
here i should do getby id 
    this.truckService.getTruckById(truckId)

    this.router.navigate(['/edits'])
  }

这个操作应该在下面的另一个组件中填充一个表单是那个组件和表单，我是 angular 新手，所以我可能有一些错误，请提供任何建议

export class EditTruckComponent implements OnInit {

  private truck: Truck;

  public truckForm: FormGroup;

  constructor(private truckService: TruckService, formBuilder: FormBuilder,
              private router: Router) {

    this.truckForm = formBuilder.group({
      truckCode: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(30)]],
      purchasedDate: ['', [Validators.required]],
      descriptions : ['', [Validators.required]]
    });
  }

  // private readonly toastCtrl: ToastController

  ngOnInit() {
    this.truck = this.truckService.getter();
  }

  processForm() {
    if (this.truck  == undefined) {
      this.truckService.createTruck(this.truck)
        .subscribe((truck) => {
          console.log(truck)
          this.router.navigate([''])
        },(error) => {
          console.log(error);
        });
    } else {
      this.truckService.updateTrucks(this.truck)
        .subscribe(
          (truck) => {
            console.log(truck);
            this.router.navigate([''])
          }, (error) => {
            console.log(error);
          });
    }

  }

  hasError(field: string, error: string) {
    const ctrl = this.truckForm.get(field);
    return ctrl.dirty && ctrl.hasError(error);
  }

  isInvalidAndDirty(field: string) {
    const ctrl = this.truckForm.get(field);
    return !ctrl.valid && ctrl.dirty;
  }

这是我的卡车组件的卡车 html 的一部分

<table class="table table-striped">
            <thead class="thead-inverse">
            <tr>
              <th>TruckId</th>
              <th>TruckCode</th>
              <th>purchasedDate</th>
              <th>descriptions</th>
              <th></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let truck of trucks | async">
              <td>{{truck.truckId}}</td>
              <td>{{truck.truckCode}}</td>
              <td>{{truck.purchasedDate | date: 'yyyy-MM-dd'}}</td>
              <td>{{truck.description}}</td>
              <td class="text-right">
                <a class="btn-sm btn-outline-secondary"
                   ngbTooltip="Edit Truck"
                   placement="top">
                  <i class="fa fa-bus"></i> <span
                  class="d-none d-md-inline"  (click)="updateTruck(truck)" >Edit</span></a>

                 <span data-toggle="modal" data-target="#deleteDialog">
                                <a href="#" class="btn-sm btn-outline-secondary"
                                 ngbTooltip="delete truck"
                                 placement="top">
                                    <i class="fa fa-remove"></i>
                                <span class="d-none d-md-inline" (click)="deleteTruck(truck)">Delete</span></a>
                </span>
              </td>

Answer 1

您可以使用 ActivatedRoute 解决此问题：
第 1 步：[ routing.ts ]

const routes = [ { path: 'edit/:id', component: EditTruckComponent }, ... ]

第 2 步：导航时的 [ TrucksComponent.ts ]

updateTruck(truckId) { this.router.navigate([`/edits/${truckId}`])

第三步：[EditTruckComponent.ts]我们需要使用ActivatedRoute form @angular/router

contructor( ..., private route: ActivatedRoute, ... ) { }

第四步：[EditTruckComponent.ts]从URL中获取id

ngOnint() { this.route.params.subscribe((param)) => { console.log(param['id'];  } 

第 5 步：现在您在 [ EditTruckComponent ] 中获取了 id，使用 param['id'] 调用下面的服务；

this.truckService.getTruckById(param['id']).subscribe(...);