Angular 如何实现角度'；s"；“盒子里的香蕉”；与自定义元素的双向绑定？

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

我的理解是，我可以使用“盒子里的香蕉”来处理这个绑定，比如将aka

转换为

，等等

我的角度模板：

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

我做错了什么

---

这是我的应用程序（在Chrome中运行）：

我将用以下内容替换

isClicked

声明：

private _isClicked = false;

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

---

@jbnizetafaik我们可以通过

（输出）

语法处理自定义事件。但是我们将获得

CustomEvent

作为

$event

参数是的，我认为您可以将其重写为

以使其正常工作。但不幸的是，“盒子里的香蕉”方法的工作方式有所不同，这取决于您使用的是

@Output

还是CustomEvent；我希望把他们统一起来。我在这里明确表示：

private _isClicked = false;

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