在Angular 2中操纵Dom

我正在创建一个角度为2的Web。我有一个Jquery代码，当单击一个自定义按钮时添加2个输入和1个删除按钮，因此，当用户单击删除按钮时，它会删除输入（操纵DOM）。

Jquery代码：

//Adiciona campos extra nos sócios var campos_max = 10; //max de 10 campos var x = 1; // campos iniciais $('#add_field').click (function(e) { e.preventDefault(); //prevenir novos clicks if (x < campos_max) { $('#listas').append('
\ 
\ Nome sócio:\ 
\ *\ \ 
\ 
\ 
\ Participação (%):\ 
\ *\ \ 
\ 
\ \ 
'); x++; } }); // Remover o div anterior $('#listas').on("click",".remover_campo",function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }); 

我怎么能在Angular 2中做到这一点？ 我读到了关于elementRef和Renderer的内容，但我很困惑。

Answer 1

在Angular中，您不会从JavaScript向您的页面注入HTML。 （你可以，但这不是一个好习惯）

所有HTML都应该在您的模板中，用* ngIf标签包装，以便在需要时添加和删除元素。

 
 your HTML here  

然后，您可以绑定到按钮的（单击）事件，以便在单击时切换布尔值“isShowing”：

所以最终的forms应该是这样的：

 
 
form
 
 
   hide form 
 show form