html - 如何将数据从一个组件传递到另一个组件

Question

当我点击编辑时，我可以编辑，但是当我尝试将一种类型附加到父级时，它需要父级信息而不是创建新的 VI。

我制作的 Angular 对话框是这样的，但组件我不知道。

这是有对话的

<div class="dropdown-menu-item" (click)="openValueItemEditDialog({valueItem: valueItem})">Edit</div>

这是TS

openValueItemEditDialog(editOptions: EditOptions) {
    this.dialog.open(ValueItemEditDialogComponent, {data: editOptions, disableClose: true});
  }

这就是对话的TS

constructor(private store: Store<ApplicationState>, @Inject(MAT_DIALOG_DATA) public editOptions: EditOptions) {

  }

  ngOnInit() {  

     if (this.editOptions.valueItem) {
          this.editedValueItem = _.cloneDeep(this.editOptions.valueItem);
        } else {
          this.editedValueItem = emptyValueItem();
        }

export interface EditOptions {

      valueItem?: ValueItem;
      appendToParentId?: string;
      planning?: number;
    }

但是没有对话我不知道如何传递数据

   showChild = false

       edit(editOptions: EditViOptions) {
  this.showChild = !this.showChild;
  if (editOptions.valueItem) {
    return editOptions.valueItem;
  } else if (editOptions.appendToParentId) {
    return editOptions.appendToParentId;
  }
  this.activeSelected = this.valueItem.id;
} //this open and closes the component

    }

这是服务矩阵行的Html

<app-edit-dialog-vi [showMePartially]="showChild"></app-edit-dialog-vi>


 <div *ngIf="valueItem.level < 7" class="dropdown-menu-item" (click)="edit({appendToParentId: valueItem})">Append2</div>

这是编辑对话vi

<div *ngIf="showMePartially" class="container">
</div>

在构造函数中我不知道该写什么

这是我为编辑 vi 对话框创建的 TS 文件和界面

  constructor(private store: Store<ApplicationState>, public editOptions: ServiceMatrixRowComponent) { }

  ngOnInit() {
if (this.editOptions.valueItem) {
  this.editedValueItem = _.cloneDeep(this.editOptions.valueItem);
  console.log(this.editedValueItem, '***');
} else {
  this.editedValueItem = emptyValueItem();

}

    export interface EditViOptions {
      valueItem?: ValueItem;
      appendToParentId?: string;
      planning?: number;
    }

Answer 1

我不知道我是否理解你的问题，但你可以试试这个:

ParentHtml

<app-edit-dialog-vi [data]="dataToPass" [showMePartially]="showChild"></app-edit-dialog-vi>
 <div class="dropdown-menu-item" (click)="edit(valueItem.level < 7 ? {appendToParentId: valueItem.id} : {valueItem: valueItem})">Edit2</div>

Parent Ts

添加一个属性dataToPass，并将其设置为您要发送给 child 的数据。

showChild = false;    
dataToPass: EditViOptions = null;

edit(editOptions: EditViOptions) {
  this.showChild = !this.showChild;
  if (editOptions.valueItem || editOptions.appendToParentId) {
    this.dataToPass = editOptions;
  }
  this.activeSelected = editOptions.valueItem.id;
}

Child Ts

添加一个名为 data 的输入以获取发送的数据:

@Input() showMePartially = false;
@Input() data: EditViOptions = null;

constructor(private store: Store<ApplicationState>, public editOptions: ServiceMatrixRowComponent) { }

ngOnInit() {
  if (this.data.valueItem || this.data.appendToParentId) {
    this.editedValueItem = _.cloneDeep(this.data.valueItem);
    console.log(this.editedValueItem, '***');
  } else {
    this.editedValueItem = emptyValueItem();
  }

export interface EditViOptions {
  valueItem?: ValueItem;
  appendToParentId?: string;
  planning?: number;
}