gpt4 book ai didi

javascript - Angular 2 组件内的 polymer 元素

转载 作者:太空狗 更新时间:2023-10-29 14:00:33 27 4
gpt4 key购买 nike

我有一组自定义 polymer 元素,我想在 angular 2 应用程序中使用它们。

polymer 元素的内容标签似乎有问题。如果元素位于 Angular 2 组件内,则该元素的内容会在 polymer 元素内的错误位置呈现。

例子:

我的 polymer 元素“my-button”的模板如下所示:

<template>

<button>
<content></content>
</button>

</template>

使用外 Angular

当我在 angular 2 组件之外使用这个元素时,我得到了预期的结果:

使用:

<my-button>Foo</my-button>

结果:

<my-button>
<button>
Foo
</button>
<my-button>

在 Angular 2 组件内使用

在 Angular 2 组件中使用时,内容总是在元素模板的末尾呈现。就像内容标签不存在一样。

使用:

<my-button>Foo</my-button>

结果:

<my-button>
<button>

</button>
"Foo"
<my-button>

问题

问题可能是,polymer 和 angular 2 都使用内容标签进行转译。所以当两者一起使用时,事情可能会变得有点困惑。

我很乐意在 angular 2 内使用我所有的 polymer 元素。因此,非常感谢任何有关如何解决此问题的想法。

最佳答案

Angular2 与 Polymer 的结合存在一些 Unresolved 问题。例如 Angular 不使用 Polymer.dom(el)...用于操纵 Polymer 元素子元素。这可能是破坏您的组件的原因。解决方法是启用完整的影子 DOM 和 polyfill。参见 https://www.polymer-project.org/1.0/docs/devguide/settings.html

我还没有找到解决方案的问题正在通过 <template> s(例如 <iron-list> 所必需的。Angular 自行处理模板,不会将其传递给 Polymer 元素。

有一个 ngNonBindable指示。我还没有在 <template ngNonBindable> 上试过我自己,但它可能会起作用。 我试过似乎只是忽略 [prop]="field"/prop="{{field}}绑定(bind)。

另一个问题是 <style is="custom-style"> .它们只能添加到 <head> 中元素或在 Polymer 元素内,但不包含在 Angular 组件中。

另见 Two-way binding in Angular 2 with NgModel and mutating bound property?

关于javascript - Angular 2 组件内的 polymer 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34779175/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com