Question

我有这个父组件：

export class VdsPickerComponent implements OnInit {
  @Output() onSelect: EventEmitter<any> = new EventEmitter();

  select(value) {
    this.onSelect.emit(value);
    console.log("should run second");
  }
}

和该子组件

export class AppPickerComponent implements OnInit {
  select(value) {
    this.api.getApplication(value.id).subscribe(res => {
      console.log("should run first");
      this.context.currentApplication = res;
    });
  }
}

这是AppPickerComponent的html

<vds-picker [(value)]="this.context.currentApplication"
            [(currentValue)]="this.currentApplication"
            description="description"
            placeholder="Choisir une application..."
            [editTemplate]="appedit"
            [readonly]="readonly"
            [showActions]="showActions"
            [results]="results"
            (onFilter)="filter($event)"
            (onSelect)="select($event)"
            (onCreate)="create($event)"
            (onUpdate)="update($event)"
            (onSubmit)="submit($event)"
            (onOpShow)="onOpShow($event)">
    <ng-template #appedit>
        <div id="opappadd">
            <div><input #appcode type="text" style="width: 150px;" pInputText [(ngModel)]="this.currentApplication.code" placeholder="Code" oninput="this.value = this.value.toUpperCase()" [disabled]="this.currentApplication.id" /></div>
            <div><input #appdesc type="text" style="width: 400px;" pInputText [(ngModel)]="this.currentApplication.description" placeholder="Description" /></div>
            <div><p-checkbox #thirdparty binary="true" [(ngModel)]="this.currentApplication.isThirdPartyApp" label="Application tierce"></p-checkbox></div>
            <div><input type="text" style="width: 400px;" pInputText [(ngModel)]="this.currentApplication.thirdPartyGetEndpoint" placeholder="Uri vers le endpoint GET pour les autorisations" [disabled]="!thirdparty.checked" /></div>
            <div><input type="text" style="width: 400px;" pInputText [(ngModel)]="this.currentApplication.thirdPartyPostEndpoint" placeholder="Uri vers le endpoint POST pour les autorisations" [disabled]="!thirdparty.checked" /></div>
        </div>
    </ng-template>
</vds-picker>

现在，我想对emit（）进行回调，这样，一旦我的事件完成（并且成功），我就可以在父组件中完成一些其他工作。

如何在控制台中记录以上代码：

should run first
should run second

编辑：

给出我要实现的目标的更具体示例。因此，我将提供一个@Output() onSubmit，我想提供一个函数来完成调用后端和处理成功/错误的工作。提交表单位于overlayPanel中，一旦后端调用成功，我想隐藏面板。如果存在验证错误，我不想隐藏面板，而是想在面板内部显示错误消息。我不希望用户考虑是否成功隐藏面板，组件应自行处理。

在emit（）之后进行回调

0 个答案: