angular - 如何使用自定义元素实现Angular的 "banana in a box"双向绑定(bind)？

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

我的理解是，我可以使用“盒子里的香蕉”来处理这种绑定(bind)，aka <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绑定(bind)到isClicked:

Did you click a button? [object CustomEvent]

我究竟做错了什么？

这是我的应用程序(在Chrome中运行):https://stackblitz.com/edit/angular-nlguf4

最佳答案

我将isClicked声明替换为:

private _isClicked = false;

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