如何以編程方式將離子按鈕添加到離子導航欄？（Ionic 2，Angular 2）

我需要能夠以編程方式將按鈕添加到導航欄。通過使用一種模板（在Angular 2中）或代碼（typescript），這個HTML代碼應該被添加到頁面中（在<ion-navbar>之內）。如何以編程方式將離子按鈕添加到離子導航欄？（Ionic 2，Angular 2）

<ion-buttons right (click)="doSth()"> 
    <button ion-button outline icon-only color="primary" #hduiBtn> 
     <ion-icon name="home"></ion-icon> 
    </button> 
</ion-buttons>

我發現ng-include不角2工作，同時也有變通辦法，他們是太亂在我需要它的情況下使用。

我知道警報可以在Typescript中以編程方式創建，但是，如何添加按鈕？如果不是通過標準課程，是否可以通過使用@ViewChild()來完成？我嘗試了不同的東西（管道，模板包含變量和更多），但不幸的是，不能以穩定的方式工作。

來源

2017-04-13 Kevin Van Ryckegem

你可以使用ngFor。你可以在你的類中填充你的按鈕列表（帶有按鈕屬性的對象，如圖標，顏色），並在你的模板中使用ngFor。

<ion-buttons right (click)="doSth()"> <button *ngFor='let button of buttons' ion-button outline icon-only color="{{color}}" #hduiBtn> <ion-icon name="{{icon}}"></ion-icon> </button> </ion-buttons>

來源

2017-04-13 19:16:10 Alitlili

這是在良好的方向邁出的一步，但我應該提到，它是頁面模板並不需要大量的修改要求。例如，最好有一個類似於變量或模板的東西（因爲它用於構建一個應該易於使用的特定框架 - 我不希望開發人員使用這個框架需要添加所有這些將自己編碼到模板中）。 –

你可以發佈一個pluker或更多的代碼來幫助你 – Alitlili

基本上，我需要找到一種方法來添加代碼從頁面的類，所以我可以把它放在超類中，從開發人員隱藏。該模板應該只包含非常少量的代碼（如顯示變量或其他）。我在問題中加入的代碼應該添加到模板的標記中 - 但不能通過編寫，而是通過使用變量或類似方法。關於這個問題沒有更多的代碼，所以我不確定發生什麼不幸的事情。 –

您可以從您的打字稿代碼動態添加HTML到您的模板。但是你不能動態添加角碼。因爲角度編譯只有一次，它不能編譯你的動態代碼。所以請使用html和純javascript。這裏是例子：
在HTML：<div id="parent"> </div>
在打字稿：

let parent = <HTMLDivElement>document.getElementById('parent'); 
    let button = document.createElement("button"); 
    let text = document.createTextNode("Click me"); 
    button.appendChild(text); 
    button.setAttribute('id','button1'); 
    parent.appendChild(button); 
    let button1 = <HTMLButtonElement>document.getElementById('button1'); 
    button1.addEventListener('click', (event) => { 
     //your code here 
     console.log("Button clicked"); 
    })

來源

2017-04-14 09:44:50 Duannx

如何以編程方式將離子按鈕添加到離子導航欄？ （Ionic 2，Angular 2）

回答

相關問題

如何以編程方式將離子按鈕添加到離子導航欄？（Ionic 2，Angular 2）