如何使用自定义元素实现 Angular 的“盒子里的香蕉”双向绑定？答案

【问题标题】：How do I implement Angular's "banana in a box" two-way binding with Custom Elements?如何使用自定义元素实现 Angular 的“盒子里的香蕉”双向绑定？
【发布时间】：2018-07-09 14:42:30
【问题描述】：

我正在尝试构建一个将由 Angular 应用程序使用的自定义元素。自定义元素将采用一个道具并可能对其进行操作。

我的理解是我可以使用“盒子里的香蕉”来处理这种绑定，也就是 <custom-element [(foo)]="bar"> 被转换为 <custom-element [foo]="bar" (fooChange)="bar = newBar">，等等。

我的 Angular 模板：

<an-el [(clicked)]="isClicked"></an-el>
<p>Did you click a button? {{ isClicked }}</p>

我的自定义元素调度一个事件：

this.dispatchEvent(new CustomEvent('clickedChange', { bubbles: true, detail: true }));

但它似乎将整个 CustomEvent 绑定到isClicked：

Did you click a button? [object CustomEvent]

我做错了什么？

这是我的应用（在 Chrome 中运行）：https://stackblitz.com/edit/angular-nlguf4

【问题讨论】：

@JBNizet AFAIK 我们可以通过(output) 语法处理自定义事件。但是我们会得到CustomEvent 作为$event 参数
是的，我认为您可以将其重写为 <an-el [clicked]="isClicked" (clickedChange)="isClicked = $event.detail"> 以使其正常工作。但不幸的是，“盒子里的香蕉”方法的工作方式有所不同，具体取决于您使用的是 @Output 还是 CustomEvent；希望统一他们。
我在这里明确表示：codesandbox.io/s/…

标签： angular custom-element

【解决方案1】：

我会将isClicked 声明替换为：

private _isClicked = false;

public get isClicked() {
    return this._isClicked;
  }
public set isClicked(val: CustomEvent | boolean) {
    this._isClicked = typeof val === "boolean" ? val : val["detail"];
  }

【讨论】：