如何以编程方式将离子按钮添加到离子导航栏?(离子 2，角度 2)

Question

我需要能够以编程方式向导航栏添加按钮。此HTML代码应添加到页面(<ion-navbar>内(，通过使用一种模板(在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在 Angular 2 中不起作用，虽然有解决方法，但它们太混乱了，无法在我需要的情况下使用。

我知道警报可以在 Typescript 中以编程方式创建，但是，添加按钮呢？如果不是通过标准类，是否可以使用 @ViewChild() 来完成？我尝试了不同的东西(管道、模板包含变量等(，但不幸的是，最终无法以稳定的方式工作。

Answer 1

你可以使用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>

Answer 2

您可以从打字稿代码动态地将 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");
    })