聚合物相当于ng-show？

Posted 2021-04-12

是ng-show的聚合物吗？这是我正在尝试转换的片段示例：

<h1>Greeting</h1>
<div ng-show="authenticated">
    <p>The ID is {{controller.greeting.id}}</p>
    <p>The content is {{controller.greeting.content}}</p>
</div>
<div  ng-show="!authenticated">
    <p>Login to see your greeting</p>
</div>

答案

这里不需要dom-if。只需使用$=（属性绑定）添加/删除hidden属性。

<style>
[hidden] {
    display:none;
}
</style>

<h1>Greeting</h1>
<div hidden$=[[!authenticated]]>
    <p>The ID is {{controller.greeting.id}}</p>
    <p>The content is {{controller.greeting.content}}</p>
</div>
<div hidden$=[[authenticated]]>
    <p>Login to see your greeting</p>
</div>

使用dom-if来决定您不想渲染的代码块，而不仅仅是隐藏。

另一答案

我想你可以使用dom-if在DOM树中有条件地保留所需的html。 properties应该在properties中定义。

<template is="dom-if" if="{{authenticated}}">
   <p>The ID is {{controller.greeting.id}}</p>
   <p>The content is {{controller.greeting.content}}</p>
</template>
<template is="dom-if" if="{{!authenticated}}">
   <p>Login to see your greeting</p>
</template>

另一答案

在模板中添加模板后，True和False将起作用。我试过了

   <template>
    <template is="dom-if" if="{{authenticated}}">
        {{authenticated}}
        <p>The ID is {{controller.greeting.id}}</p>
        <p>The content is {{controller.greeting.content}}</p>
     </template>

    <template is="dom-if" if="{{!authenticated}}">
        {{authenticated}}
        <p>Login to see your greeting</p>
     </template>
    </template>

如果您不在模板中添加模板True，则false将永远不会起作用。它将始终显示您具有属性的真值或假值的第一个模板。

希望它有效。