时间戳

首页 > 解决方案 > 如何以角度将值传递给其他对话框组件

angular - 如何以角度将值传递给其他对话框组件

问题描述

我有一个组件，我将它用作主组件上的对话框，它可以工作，但我必须知道如何向它发送一个值（一个对象），以便在用户触发对话框时将它的值插入我的表单（如果object = null 它使表格清晰）；

这是我的组件

1-主要成分：

export class GestionDesChauffeursComponent implements OnInit {
constructor(private _fuseTranslationLoaderService: FuseTranslationLoaderService,
    private service: GetionChauffeursService, private dialog: MatDialog) { this._fuseTranslationLoaderService.loadTranslations(english, turkish); }
  Update_chauffeur(){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.height = "570px";
    dialogConfig.width = "550px";
    this.dialog.open(EditNewChauffeursComponent,dialogConfig);
  }
  onEdit(row){
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = false;
dialogConfig.autoFocus = true;
dialogConfig.height = "570px";
dialogConfig.width = "550px";
//this.dialog.open(EditNewChauffeursComponent,dialogConfig);
this.dialog.open(EditNewChauffeursComponent,{
  ...dialogConfig,
  data: {
     // data I want to pass into the dialog
     myVar: row
  }


});


 onDelete(key){
    var index = index = this.listDriverElementEntity.map(x => {return x.key}).indexOf(key);
    console.log(index);
    this.listDriverElementEntity.splice(index, 1);
    this.service.Removechauffeur(key).subscribe(data=>{
    this.listdata = new MatTableDataSource(this.listDriverElementEntity);
    console.log(data);
    });

  }

Rq：该行包含我的数据表的对象是我在触发 onEdit 函数时将发送的对象。

我的 EditNewChauffeursComponent 组件：

model: any = {};
  profileForm = this.fb.group({
    Nom_de_famille: ['', Validators.required],
    Prénom: ['', Validators.required],
    email: ['', [Validators.email,Validators.required]],
    Code_personnel: ['', Validators.required],
    N_tel: [''],
    Département: ['', Validators.required]
  });
  constructor(public dialogRef: MatDialogRef<EditNewChauffeursComponent>, private fb: FormBuilder,private _snackBar: MatSnackBar,private service: GetionChauffeursService) { }


 @Inject(MAT_DIALOG_DATA) indata: any 
    ngOnInit() {
    console.log(this.indata);
    }
      setdefaultformvalues(row) {
        this.profileForm.setValue({
          Nom_de_famille: [row.FirstName],
          Prénom: [row.LastName],
          email: [row.Email],
          Code_personnel: [row.DriverCode],
          N_tel: [''],
          Département: ['']
        });
      }

我只是更改了我的代码但是'indata'给出了未定义的值。

标签： angular

解决方案

你打开对话框可以传递数据：

例如：


    // instead of : 
    this.dialog.open(EditNewChauffeursComponent,dialogConfig);

    // you can do : 
    this.dialog.open(EditNewChauffeursComponent,{
       ...dialogConfig,
       data: {
          // data I want to pass into the dialog
          myVar: 'my var val'
       }
    });

在模态方面，您必须添加一个注入器来接收数据，方法如下：


 // ... my code 

 constructor(

    // add the following to your constructor : 
    @Inject(MAT_DIALOG_DATA) indata: any ) { }


    // you can use the injected variable as you would any other 
    // injected var, meaning something like: 
    ngOnInit() {
       this.setdefaultformvalues(this.indata);//will have row objct
    }

推荐阅读