Angular14：不使用snapshot params传递参数到StudentEdit组件

由于你使用的是ngx-bootstrap的ModalService，可以直接通过模态框的初始化状态传递数据，无需依赖路由参数，具体实现步骤如下：

1. 修改student-list组件的模态框调用逻辑 #

在student-list.component.ts的editMerchantUserData方法中，通过initialState参数传入row.id：

editMerchantUserData(row: any) {
  console.log(row);
  this.bsModalRef = this.modalService.show(StudentEditComponent, {
    class: 'gray modal-lg',
    initialState: {
      studentId: row.id
    }
  });
}

注意：你模板中绑定的方法是editStudentData，但TS文件里的方法名是editMerchantUserData，需要保持两者一致，避免触发失败。

2. 在student-edit组件中接收并赋值 #

方式一：使用@Input()装饰器（推荐） #

通过Angular的输入属性接收传递的ID，然后赋值给组件内的_id：

import { Component, Input, OnInit } from '@angular/core';

@Component({
  // 组件元数据
})
export class StudentEditComponent implements OnInit {
  _id!: any;
  @Input() studentId!: string;

  ngOnInit(): void {
    this._id = this.studentId;
  }
}

方式二：通过BsModalRef直接获取 #

如果不想用输入属性，也可以在student-edit组件中注入BsModalRef，直接从模态框实例中读取数据：

import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  // 组件元数据
})
export class StudentEditComponent implements OnInit {
  _id!: any;

  constructor(private bsModalRef: BsModalRef) {}

  ngOnInit(): void {
    this._id = this.bsModalRef.content.studentId;
  }
}

两种方式都能实现你的需求，其中@Input()的方式更符合Angular组件间通信的规范。

内容的提问来源于stack exchange，提问作者Ayobamilaye