当第一次完成时，角2会发出第二个发射

问题描述：

我们已经开始从ng1迁移到ng2，但我不明白如何升级我的按钮组件。例如：在角度1，I可以通过一个承诺的部件的内部，并等待响应，例如：当第一次完成时，角2会发出第二个发射

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: '&' 
    } 
});

但是，我怎样才能实现这一目标在角2 @Output和EventEmitter？我用@Input来实现这一点，从组件和ButtonComponent和FormComponent之间的服务的回调，但我相信这是完全错误的。会很高兴有任何帮助。谢谢。

角2代码：

登录up.template.html

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

登录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(); 
    } 
}

答

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

@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将字符串“some值”，但你可以用你喜欢的

答

你可以做你一样有角1做过任何对象，使用Observer：

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返回可观察的：

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

当第一次完成时，角2会发出第二个发射

相关推荐