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>

Answer 2

Imho，@Output是巨大的设计缺陷，因为您无法对结果或处理结果作出反应。这个缺陷的第一个例子是点击一个按钮。单击时，应该在执行操作时禁用99％的按钮。操作完成后，应再次启用该按钮。这是你想要在元素本身处理的东西，而不是在父元素中。使用@Output，您无法执行此操作。使用动作函数@Input，您可以执行此操作！如果你的动作函数返回一个Observable或Promise，你可以轻松地等待它。创建一个处理此禁用的自定义指令很简单，因此您可以在任何地方使用[click]，它会以这种方式运行。

编辑：我不是说@Output没有使用它，但不是你需要等待的行动等等......命名你的{{1}好的，也澄清了流程，如@Input等......

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

2 个答案: