* ngIf эквивалент в освещенном элементе / полимере

Question

Я пытаюсь реализовать условие на основе HTML в lit-element и мне нужно что-то вроде * ngIf, который обеспечивает Angular.

Я могу отрендерить HTML в зависимости от условий, но это будет здорово, если это можно сделать с условием.

Answer 1

Вы можете использовать обычный Javascript. Хорошо объяснено в официальной документации

Пример:

${this.myBool ? html`<p>something</p>` : html`<p>something else</p>`}

Answer 2

Расширяя ответ Кубы, хорошо быть настолько точным, насколько это возможно, при * освещенных условиях - html, поскольку чем шире область действия вашего условия, тем больше шаблона необходимо перерисовать при выполнении условия меняется. Например, вы можете сделать пример, приведенный в официальной документации :

this.myBool ? html`<p>something</p>` : html`<p>something else</p>`

и записать его более эффективно как:

html`<p>${this.myBool ? 'something' : 'something else'}</p>`

Это небольшое изменение здесь не делает не сильно меняется, но когда вы можете уменьшить количество перерисовок слоев компонентов, он начинает складываться.

Более подробное объяснение того, как lit-html обрабатывает рендеринг шаблонов, см .: https://lit-html.polymer-project.org/guide/concepts#template -создание