Angular2为什么在@Input上使用@Output进行回调

Question

在与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类的开销.

Answer 1

猫的皮肤总是有不止一种方法.但是,在我看来,使用@Output具有以下好处:

• 代码可读性:如果使用推荐的样式,则更容易了解数据流.

• 解耦:例如,对于正常@Output事件,在您ParentComponent的处理中,您可以更灵活地处理调度事件:

• 最后但并非最不重要 - 它在框中使用香蕉语法:在你的内容中说ChildComponent:

@Input() creditCardValue: string; @Output() creditCardValueChange: EventEmitter<string>;

然后你可以ParentComponent轻松地进行双向绑定:

<credit-card-form [(creditCardValue)]="creditCardVal"></credit-card-form>