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

时间:2018-07-02 06:57:18

标签: html css angular typescript

当我单击以进行编辑时,我可以进行编辑,但是当我尝试向父级添加类型时,它将采用父级信息,而不创建新的VI。

我使用了这样的角度对话框,但是使用了我不知道的组件。

这是对话框

E/cv::error(): OpenCV(3.4.1) Error: Parsing error (Unknown layer type: yolo) in bool cv::dnn::darknet::ReadDarknetFromCfgFile(const char*, cv::dnn::darknet::NetParameter*), file /build/master_pack-android/opencv/modules/dnn/src/darknet/darknet_io.cpp, line 503 07-02 12:10:21.455 31240-31240/ E/org.opencv.dnn: dnn::readNetFromDarknet_10() caught cv::Exception: OpenCV(3.4.1) /build/master_pack-android/opencv/modules/dnn/src/darknet/darknet_io.cpp:503: error: (-212) Unknown layer type: yolo in function bool cv::dnn::darknet::ReadDarknetFromCfgFile(const char*, cv::dnn::darknet::NetParameter*)

这是TS

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

这是对话框的TS

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

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

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;
    }

这是“服务”矩阵行的HTML

   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

    }

这是edit-dialog-vi

<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”对话框创建的TS文件和界面

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

2 个答案:

答案 0 :(得分: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>
  

父母Ts

添加属性dataToPass,并将其设置为要发送给子级的数据。

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;
}
  

儿童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;
}

答案 1 :(得分:0)

为了更好地学习,我建议您只看下面的链接。它会让您知道如何以不同的方式传递来自Parent-> Child和Child-> Parent组件的数据。

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

希望它能为您提供帮助。

谢谢