我正在尝试构建一个将由 Angular 应用程序使用的自定义元素。自定义元素将采用一个 prop 并可能对其进行操作。
我的理解是我可以使用“盒子里的香蕉”来处理这个绑定,又名<custom-element [(foo)]="bar">
被转换为<custom-element [foo]="bar" (fooChange)="bar = newBar">
,或类似的。
我的角度模板:
<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 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"];
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)