イオンラベルを動的に作成する

Question

ION2でイオンラベルを動的に作成しようとしています。

私はHTML DOM

var iDiv = document.createElement('input'); 
    iDiv.id="lbl2"; 
iDiv.setAttribute("type","text"); 
iDiv.setAttribute("style", "background-color: transparent;"); 
iDiv.setAttribute('width','400px') 
iDiv.setAttribute('height','1000px') 
iDiv.setAttribute("value",""); 
iDiv.setAttribute("placeholder","Label2 placeholder"); 
document.getElementById('billerdiv').appendChild(iDiv); 

を使用して、次のコードではJavaScript /活字体でこれを達成することができます上記のコードは基本的なHTMLのINPUTを作成... ルックアンドフィールは点で最大イオンイオンラベルではありません。 ..

HTML側でイオンラベルとイオン入力を作成するには、次のようにします。

<ion-item> 
    <ion-label>Username</ion-label> 
    <ion-input type="text"></ion-input> 
    </ion-item> 

これをJavaScript/Typescriptで動的に作成する方法

Answer 1

これを行うには、そのHTMLコードをページに追加するときにIonicが生成するhtmlマークアップを作成する必要があります。だから、document.createElement('ion-item');を使用しているマークアップを作成し、（element.className = ...;付き）のクラスを設定し、チャイルズを追加

<ion-item class="item item-input"> 
    <div class="item-inner"> 
     <div class="input-wrapper"> 
      <ion-label id="lbl-0">Username</ion-label> 
      <!--template bindings={}--> 
      <ion-input type="text"> 
       <input class="text-input ng-untouched ng-pristine ng-valid" type="text" placeholder="" aria-labelledby="lbl-0" autocomplete="off" autocorrect="off"> 
       <!--template bindings={}--> 
       <button class="text-input-clear-icon button button-clear" clear="" type="button" hidden=""><span class="button-inner"></span> 
        <ion-button-effect></ion-button-effect> 
       </button> 
       <!--template bindings={}--> 
      </ion-input> 
     </div> 
    </div> 
    <ion-button-effect></ion-button-effect> 
</ion-item> 

：あなたがあなたのページで

<ion-item> 
    <ion-label>Username</ion-label> 
    <ion-input type="text"></ion-input> 
</ion-item> 

を追加するときに、レンダリングされた後、そのコードは、その後に変換されます（element.appendChild(anotherElement);で、たとえ可能であっても、悪夢となるでしょう）

私はこのラベルをdinamicallyで作成する必要があるのでしょうか？Angular 2の方法を使用して、私たちはこのようなことを避けることができます。