Wie programmiere ich Ionic-Tasten programmatisch zur Ionic-Navigationsleiste? (Ionic 2, Angular 2)

Ich muss in der Lage sein, programmatisch Schaltflächen zur Navbar hinzuzufügen. Dieser HTML-Code sollte der Seite (innerhalb der <ion-navbar>) hinzugefügt werden, indem eine Art Vorlage (in Angular 2) oder Code (Typoskript) verwendet wird.Wie programmiere ich Ionic-Tasten programmatisch zur Ionic-Navigationsleiste? (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>

Ich fand, dass ng-include nicht in Angular 2 nicht funktioniert, und während es Umgehungen sind, sind sie zu chaotisch in der Situation, die ich es für verwenden müssen.

Ich weiß, dass Warnungen programmgesteuert in Typescript erstellt werden können, aber was ist mit dem Hinzufügen von Schaltflächen? Wenn nicht über Standard-Klassen, ist es möglich, es mit @ViewChild() zu tun? Ich habe verschiedene Dinge ausprobiert (Pipes, Template beinhaltet via Variablen und mehr), konnte aber leider nicht stabil arbeiten.

Quelle

2017-04-13 Kevin Van Ryckegem

können Sie ngFor verwenden. Sie füllen Ihre Schaltflächenliste (Objekt mit Schaltflächeneigenschaften wie Symbol, Farbe) in Ihrer Klasse und verwenden ngFor in Ihrer Vorlage.

<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>

Quelle

2017-04-13 19:16:10 Alitlili

Das ist ein Schritt in die richtige Richtung, aber ich sollte erwähnt haben, dass es eine Voraussetzung ist, dass die Seitenvorlage nicht viel Veränderung braucht . Zum Beispiel wäre es besser, etwas wie eine Variable oder einen Template-Include zu haben (da es zum Erstellen eines spezifischen Frameworks dient, das einfach zu verwenden sein soll - ich möchte nicht, dass Entwickler dieses Framework benötigen, um hinzugefügt werden zu müssen All diese Codes selbst in die Vorlage). –

können Sie einen pluker ou mehr Code, um Ihnen zu helfen – Alitlili

Nun, im Grunde müsste ich einen Weg finden, um den Code aus der Klasse der Seite hinzuzufügen, so dass ich es in die Superklasse, versteckt vom Entwickler einfügen konnte. Die Vorlage sollte nur eine sehr kleine Menge Code enthalten (wie die Anzeige einer Variablen oder eines anderen). Und der Code, den ich in die Frage geschrieben habe, sollte in den Tag der Vorlage eingefügt werden - aber nicht durch Schreiben, sondern durch Verwendung einer Variablen oder ähnlichem. Es gibt nicht mehr Code über diese Frage, also bin ich mir nicht sicher, was ich leider zu posten habe. –

Sie können html dynamisch an die Vorlage von Ihrem Typoskript Code hinzu. Sie können den Winkelcode jedoch nicht dynamisch hinzufügen. Weil eckig einmal complie und nicht Ihren dynamischen Code enthalten kann. Verwenden Sie stattdessen HTML und reines Javascript. Hier ist das Beispiel:
In html: <div id="parent"> </div>
In Typoskript:

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"); 
    })

Quelle

2017-04-14 09:44:50 Duannx

Wie programmiere ich Ionic-Tasten programmatisch zur Ionic-Navigationsleiste? (Ionic 2, Angular 2)

Antwort

Verwandte Themen