我如何在一个盒子里实现Angular＆＃34;香蕉？＃34;使用自定义元素进行双向绑定？

Question

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

我的理解是我可以在盒子里使用＆＃34;香蕉＆＃34;要处理此绑定，请将<custom-element [(foo)]="bar">转换为<custom-element [foo]="bar" (fooChange)="bar = newBar">等。

My 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

Answer 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"];
  }