Angular2 为什么使用@Output 而不是@Input 进行回调

Question

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

使用@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中进行双向绑定(bind)轻松:

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