Question

我创建了一个组件si-button，它可以作为进度按钮（单击时会显示加载指示符）。

我将点击的si-button组件传递给要执行的方法的引用，如下所示：

<si-button [pb-click]="register">Register</si-button>

register方法返回一个承诺，只要承诺未得到解决，就会显示加载指示符。在SIButtonComponent类中，单击按钮时会执行register方法。

SIButtonComponent：

export class SIButtonComponent{
    ...

    @Input('pb-click') pbClick : () => Promise<any> = null;

    handleClick($event){
        this.loading = true;

        this.pbClick().then(() => {
            this.showSuccess();
        }, (data) => {
            this.showError();
        });
    }

    ...
}

RegisterComponent：

export class RegisterComponent{
    register() : Promise<any> {
        return new Promise((resolve, reject) => {
            this.auth.register(this.email, this.password).subscribe((org : Organization) => {
                resolve();
            }, (error : ErrorResponse) => {
                reject();
            });
        });
    }
}

问题由于方法register是从SIButtonComponent的实例执行的，因此this引用SIButtonComponent实例而不是RegisterComponent。我该怎么做才能正确？对@Output参数使用@Input而不是pb-click更有意义，但我不知道如何在发出后获得Promise - 实例然后点击事件。

Answer 1

改为使用箭头功能：

export class RegisterComponent {
    registerFunction = () => this.register();
    ...
}

<si-button [pb-click]="registerFunction">Register</si-button>

角度执行在正确的上下文

1 个答案: