Несколько раз создайте экземпляр @ViewChild, чтобы я мог снова использовать HTML Angular 4

Я пытаюсь несколько раз вызвать компонент HTML, но без повторного включения дочернего компонента в родительский компонент.

Мне нужно, чтобы это было так:

<father-component>
  <child-component #id>
  <button (click) = "#id.show()">
</father-component>

HTML в дочернем компоненте скрыт, пока я не нажму кнопку.

Дело в том, что я хочу показывать html дочернего компонента столько раз, сколько нажата кнопка.

Насколько я знаю, @ViewChild создает экземпляр html только один раз, поэтому, если я попытаюсь добавить этот html в другой div, он добавит то же самое. Мне нужно знать, есть ли способ создать экземпляр нового @ViewChild каждый раз, когда я вызываю функцию.


typescript javascript angular instance viewchild
person Hely Saul Oberto    schedule 19.10.2017    source источник
comment
ViewChild — это просто ссылка на элемент DOM. Может быть, вы хотите использовать ViewChildren?   -  person rjustin    schedule 19.10.2017
comment
@ViewChild() не связан с созданием экземпляра HTML, он только предоставляет доступ к элементу, компоненту или директиве в представлении. См. также stackoverflow.com/questions/32693061/   -  person Günter Zöchbauer    schedule 19.10.2017

Ответы (1)


arrow_upward
3
arrow_downward

Одним из возможных решений является использование ngFor следующим образом:

<father-component>
  <child-component *ngFor="let i of children">
  <button (click) = "increment()">
</father-component>

Затем используйте метод increment в своем классе компонентов, который увеличивает количество дочерних элементов. Это позволит вам иметь любое количество дочерних компонентов.

person DeborahK    schedule 19.10.2017