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

Question

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

我的理解是，我可以使用“盒子里的香蕉”来处理此绑定(bind)，又名 <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

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