Что касается моего анализа, то не удалось отобразить динамический веб-компонент Lightning Динамическое создание веб-компонентов Lightning пока не поддерживается.

Может ли кто-нибудь предложить лучший подход для отображения поля ввода на основе типа. Ниже мой пример сценария

У меня есть ситуация, когда пользователь может выбирать любые поля на объекте. В зависимости от типа поля мне нужно отобразить поле ввода.

Подход 1:

<template if:true={isPhone}>
  phone input
</template>
<template if:true={isEmail}>
  Email input
</template>
'
'
' and more.....

Недостатком этого подхода является то, что все template:if вызываются для одного типа

Подход 2:

Шаблон рендеринга на основе типа.

 import { LightningElement, track  } from 'lwc';
   import inputPhone from './inputPhone.html';
   import inputEmail from './inputEmail.html';

   render() {
        return isPhone ? inputPhone : inputEmail;
    }

Я не пробовал этот подход, мне интересно, это сработает или нет?

Может кто-нибудь поделиться своими мыслями по этому поводу? Заранее спасибо.

3
vignesh 21 Дек 2019 в 23:22

1 ответ

Лучший ответ

Оба описанных вами подхода должны работать нормально.

Первый подход проиллюстрирован в рецепте базовых компонентов Salesforce Lightning здесь для выходного поля.

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

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

Для вашего варианта использования вариант 1 выглядит более лучшим подходом, поскольку вы можете использовать компонент телефона и электронной почты по отдельности, а также с другими компонентами.

2
Mohith Shrivastava 22 Дек 2019 в 11:34
2
Я думаю, что оба подхода одинаково многоразовые. Единственное отличие состоит в том, что в первом подходе дочерние компоненты, такие как компонент телефона, могут использоваться индивидуально.
 – 
salesforce-sas
22 Дек 2019 в 09:24
Вот что говорит ответ! Оба подхода жизнеспособны, но сначала вы используете правильную композицию, чтобы можно было повторно использовать дочерние компоненты!
 – 
Mohith Shrivastava
22 Дек 2019 в 11:25
Привет, Мохит, насколько я знаю, невозможно назначать шаблоны только по их пути (во время выполнения, чтобы шаблоны можно было добавить позже) в подходе 2. Это правильное предположение?
 – 
Keith C
22 Дек 2019 в 12:36
Вы имеете в виду динамический импорт? Я не думаю, что на данный момент поддерживается какое-либо динамическое поведение.
 – 
Mohith Shrivastava
22 Дек 2019 в 12:55
Спасибо....@mohith, keith,salesforcesas
 – 
vignesh
22 Дек 2019 в 19:36