如何以编程方式将离子按钮添加到离子导航栏？ （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()来完成？我尝试了不同的东西（管道，模板包含变量和更多），但不幸的是，不能以稳定的方式工作。
答
你可以使用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>
答
您可以从您的打字稿代码动态添加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");
})
这是在良好的方向迈出的一步，但我应该提到，它是页面模板并不需要大量的修改要求。例如，最好有一个类似于变量或模板的东西（因为它用于构建一个应该易于使用的特定框架 - 我不希望开发人员使用这个框架需要添加所有这些将自己编码到模板中）。 –
你可以发布一个pluker或更多的代码来帮助你 – Alitlili
基本上，我需要找到一种方法来添加代码从页面的类，所以我可以把它放在超类中，从开发人员隐藏。该模板应该只包含非常少量的代码（如显示变量或其他）。我在问题中加入的代码应该添加到模板的标记中 - 但不能通过编写，而是通过使用变量或类似方法。关于这个问题没有更多的代码，所以我不确定发生什么不幸的事情。 –