Как сделать несколько экземпляров одного и той же угловой работой 2 компонента должным образом в том же контейнере

У меня есть компонент <editor [id]="id"> шаблона какКак сделать несколько экземпляров одного и той же угловой работой 2 компонента должным образом в том же контейнере

<input id="name" /> 
<label for="name"></label>

и использовать его рамки CSS, как MaterializeCSS, который связывает метки к вводам с использованием уникального HTML DOM id.

Теперь, если я это сделать:

<div *ngFor="let someThing of listOfSomeThings"> 
    <editor [id]="someThing.id"></editor> 
</div>

угловой генерирует множество компонентов с одинаковым идентификатором, поэтому атрибут ID не обнесен на все и компоненты начинают конфликтовать друг с другом.

Я нашел решение, делая это:

<input [id]="id + 'name'" /> 
<label [for]="id + 'name'" />

Но это выглядит плохо, и приводит к менее поддерживаемому коду. Есть ли какой-нибудь аккуратный и более тонкий способ написать полностью инкапсулированные элементы (возможно, некоторые внутренние функции Angular 2, которые мне нужно включить)? Или я должен написать все компоненты таким образом, чтобы они никогда не конфликтуют в таких ситуациях?

источник

2017-01-21 EwanCoder

Как этот менее ремонтируемый код? Если вы хотите использовать один и тот же компонент на странице более одного раза, это хороший вариант для получения уникальных идентификаторов. Это: '=" id + 'name'', действительно работает? Похоже, вам не хватает двойной кавычки. –

Да, это действительно работает. И я пропустил двойную цитату. Это приводит к более загроможденному и, следовательно, менее обслуживаемому коду, потому что теперь я думаю, что я должен использовать такие ID в каждом компоненте, который я создаю, даже те, которые я не использую таким образом, потому что кто-то может использовать его таким образом. Кроме того, если у компонента нет уникального идентификатора, чтобы генерировать его (например, какой-то guid), потому что кто-то может помещать несколько экземпляров на одну страницу. – EwanCoder

Я не вижу, как это может произойти, если у вас нет дубликатов идентификаторов в ListOfSomethings. Можете ли вы воспроизвести свою проблему в этой панели: https : //plnkr.co/edit/62WNlCTtK5WIWVswLYyq? p = preview – gautam1168

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

источник

2017-01-21 21:57:33 kemsky

Вопрос: должен ли я генерировать этот UUID для ** каждого ** компонента, который я создаю? Я еще не видел никаких компонентов, созданных таким образом, и это действительно беспокоит меня, что я могу установить любой сторонний компонент и не могу использовать несколько экземпляров на одной странице. – EwanCoder

Было бы идеально, если бы у Angular 2 была функция, позволяющая генерировать префикс случайных [id] для каждого экземпляра компонента. Может быть, я должен написать это на вопросы в github? – EwanCoder

, если вы используете атрибут id, тогда вы должны предоставить уникальное значение, оно не имеет ничего общего с угловым. – kemsky

Как сделать несколько экземпляров одного и той же угловой работой 2 компонента должным образом в том же контейнере

ответ

Смежные вопросы