使用StencilJS中断AngularJS表达式

Question

我有一个用StencilJS创建的自定义选择web组件，我在AngularJS中使用它，如下所示：

<my-select>
  <my-option ng-repeat="item in items">
    {{item.value}}
  </my-option>
</my-select>

问题是，每当我在items数组(items.push({key: 'some', value: 'Some Value'}))上推送一个新项时，表达式似乎也会在DOM中打印它自己的语法，如下所示：

​

​

这是<my-option> StencilJS组件结构：

render() {
  return (
    <div class="option-container" onClick={this.selectOption(this)}>
      <slot />
    </div>
  );
}

任何帮助都将不胜感激。谢谢。

Answer 1

你有没有尝试过最新的浏览器，比如最新的Firefox或Chrome？我遇到了一些非常愚蠢的问题，因为例如，Edge Browser最初确实将<slot标记呈现为字符串，并且只呈现一次innerHTML。另一个浏览器会将插槽保留为DOM元素，因此它更具动态性。