0

我有这个父组件：

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 中，一旦后端调用成功，我想隐藏面板。如果有验证错误，我不想隐藏面板，我想在面板内显示错误消息。如果成功，我不希望用户考虑隐藏面板，组件应该自己处理。

4

0 回答 0