Angular 2 在第一次完成时进行第二次发射答案

【问题标题】：Angular 2 make a second emit, when first completesAngular 2 在第一次完成时进行第二次发射
【发布时间】：2016-12-05 12:12:37
【问题描述】：

我们已经开始从 ng1 迁移到 ng2，但我不明白如何升级我的按钮组件。例如：在 Angular 1 中，我可以在组件内部传递一个 Promise 并等待响应，例如：

class ButtonController {
   click: () => Promise<any>;
   form: SomeForm;

   onClick(): void {
      this.click().then(() => {
         this.form.doSomething();
      });
   }
}

export const ButtonComponent = {
   templateUrl: 'button-component.template.html',
   controller: ButtonController,
   controllerAs: 'vm',
   require: '^form',
   bindings: {
      click: '&'
   }
});

但是，如何使用 @Output 和 EventEmitter 在 Angular 2 中实现这一点？我已经通过@Input、来自组件的回调以及 ButtonComponent 和 FormComponent 之间的服务实现了这一点，但我确信这是完全错误的。会很高兴得到任何帮助。谢谢。

角2代码：

注册模板.html

// content
<ab-form [uFormGroup]="signUpForm">
   //content
   <ab-button [uClick]="onClick"></ab-button>
</ab-form>

sign-up.component.ts

export class SignUpComponent {
   onClick = () => {
      //do something async
   }
}

form.component.ts

@Component({
   selector: "ab-form",
   template: require("./form.template.html"),
   providers: [
      FormService
   ]
})
export class FormComponent {
   @Input() uFormGroup: FormGroup;

   constructor(
      private formService: FormService
   ) {
      this.formService.buttonClicked$.subscribe((fn) => {
         this.uFormGroup['submitted'] = true;

         if (this.uFormGroup.invlaid) {
            return this.formService.endSubmittingForm();
         }

         this.formService.startSubmittingForm();
         // resolve if function is not a promise
         Promise.resolve(fn()).then(() => {
            this.formService.endSubmittingForm();
         });
      });
   }
}

button.component.ts

export class ButtonComponent {
   submitting = false;

   constructor(
      private formService: FormService
   ) {
      this.formService.formSubmitting$.subscribe(() => {
         this.submitting = true;
      });

      this.formService.formSubmitted$.subscribe(() => {
         this.submitting = false;
      });
   }

   onClick(): void {
      this.formService.buttonClick(this.uClick);
   }
}

form.service.ts

export class FormService {
    private buttonClickedSource = new Subject<Function>();
    private formSubmittingSource = new Subject<void>();
    private formSubmitedSource = new Subject<void>();

    buttonClicked$ = this.buttonClickedSource.asObservable();
    formSubmitting$ = this.formSubmittingSource.asObservable();
    formSubmited$ = this.formSubmitedSource.asObservable();

    buttonClick(fn: Function): void {
        this.buttonClickedSource.next(fn);
    }

    startSubmittingForm(): void {
        this.formSubmittingSource.next();
    }

    endSubmittingForm(): void {
        this.formSubmitedSource.next();
    }
}

【问题讨论】：

标签： angularjs angular typescript

【解决方案1】：

您可以像这样创建简单的组件输入和输出：

@Component({
    selector: 'myButton',
    template: '<button (click)="buttonAction()">{{label}}</button>',
    inputs: ['label']
}) 
export class MyButton {
    @Input()
    label:string;

    @Output() 
    myButtonClick = new EventEmitter<any>();

    ...

    buttonAction() {
        this.tableButtonClick.emit("some value")
    }
}

然后像这样在你的模板中使用它：

 <myButton [label]="sample"
     (myButtonClick)="handleMyButtonClick($event)">
 </myButton>

$event 将是字符串“一些值”，但你可以使用任何你喜欢的对象

【讨论】：

【解决方案2】：

您可以使用 Observer 进行与 Angular 1 相同的操作：

onClick(): void {
  this.formService.buttonClick().subscribe(() => {
    // You reach this when buttonClick is async terminated
    // like your then() in your Angular 1 code
    this.uClick()
    ...
  });
}

然后在您的 FormService 中返回 Observable ：

buttonClick(): Observable<any> {
    return this.buttonClicked$;
}

【讨论】：