Angular 如何将数据从列表组件传递到编辑组件以进行数据修改

//编辑文件

export class EditStoreComponent implements OnInit {
name = '';
id: ''

  constructor(private api:APIService, private router:Router, private cookieService: CookieService, private route:ActivatedRoute) {

      }
  ngOnInit() {

  }

  async updateStore(){
    let req = {
      id:this.id,
      name:this.name
    }
    console.log(req)
  let result = await this.api.UpdateStore(req)

  if (result){
    this.router.navigate(['../admin/liststore']);
    console.log(result)
    }
  }   
}

//列表文件

  rawlist;
  name = '';
  id = '';
  storeid = "";
  store: Store;

  constructor(private api: APIService, private router: Router, private route: ActivatedRoute, private cookieService: CookieService) { }

  ngOnInit() {
    this.storelist();

  }
  //store list
  async storelist() {
    this.rawlist = await this.api.ListStores();
    this.storelist = this.rawlist.items;
  }

---

我不知道如何将ID从列表传递到编辑组件。基本上，我调用api来更新列表中的数据。我只能传递名称，但无法传递特定用户的id

传递数据有多种方式

使用主题

使用@input、@output修饰符

使用服务

但如果您想传递ID或name（类似的东西），您可以将ID附加到路由参数中

this.router.navigate(["path", extra params(id)]);

---

首先，应在列表文件中执行此操作：

      import { Modal, BSModalContext } from 'angular2-modal/plugins/bootstrap';

      this.modal.open(EditComponent, overlayConfigFactory({ 
      dataToBePassed }, BSModalContext));

然后在EditComponent中执行以下操作：

      export class AdditionPopupWindowData extends BSModalContext {
      public dataToBePassed: any;
       }

       context: AdditionPopupWindowData;
       public dataToBePassed: any;

      this.context = dialog.context;
      this.dataToBePassed = this.context.dataToBePassed;

然后在构造函数内部执行以下操作：

      export class AdditionPopupWindowData extends BSModalContext {
      public dataToBePassed: any;
       }

       context: AdditionPopupWindowData;
       public dataToBePassed: any;

      this.context = dialog.context;
      this.dataToBePassed = this.context.dataToBePassed;

干杯

请参考这个