相关疑难解决方法(0)

在与Angular1合作几年后,我正在学习Angular2.我正在创建一个信用卡表单组件,其主要目标是学习Angular2中的几个关键概念.该组件应处理所有格式,并通过回调返回Stripe标记.我意识到我可以通过两种方式处理回调.

使用@Output参数

在我的组件中,我定义了一个输出变量,并在本例中使用它:

export class CreditCardForm{
    ....
    @Output () callback = new EventEmitter();
    ....

    doCallback(){
        this.callback.emit({data: 123});
    }
}

// Parent view
<credit-card-form (callback)="creditCardCallback($event)"></credit-card-form>

使用@Input变量

但是,我可以将回调方法(creditCardCallback在父模板中使用)传递给输入变量,如下所示:

export class CreditCardForm{
    ....
    @Input () callback;
    ....

    doCallback(){
        this.callback({data: 123});
    }
}

// Parent view
<credit-card-form [callback]="creditCardCallback"></credit-card-form>

这个问题

我为什么要@Output用完@Input？我通过使用@Output变量来实现什么？据我所知,这只是增加了必须利用这个EventEmitter类的开销.