angular - 如何使用 Stencil.js 更新插槽中传递的元素？

Question

我正在使用 Stencil.js 创建一个无线电 Web 组件。

Stencil.js 代码：

  <div>
    <slot/>
    <label>
      {this.label} <span/>
    </label>
  </div>

我传递了一个无线电类型的输入。在 Angular 中的用法：

<my-radio label="{{fruit}}">
    <input name="fruits" type="radio" id="{{fruit}}">
</my-radio>

当我单击它时，我希望它应该从“输入”<input name="fruits" type="radio" id="banana">变为<input name="fruits" type="radio" id="banana" checked>.

但是即使一切都正确呈现，输入也永远不会得到“检查”的属性。我究竟做错了什么？

score 1 · Accepted Answer

这是独立于 Stencil 的预期行为。

一个布尔属性，如果存在，则表明此单选按钮是组中默认选择的单选按钮。

复选框的MDN 文档使其更加清晰：

一个布尔属性，指示是否默认选中此复选框（当页面加载时）。它不表示当前是否选中了此复选框：如果复选框的状态发生更改，则此内容属性不会反映更改。（仅更新 HTMLInputElement 的选中 IDL 属性。）

您可以使用该checked 属性来获取当前值：

document.querySelector('input[type="radio"]').checked;

1 回答 1