Angular 2 innerHTML (klicken) Bindung

Question

Ich hatte so ein großes HTML-Menü, dass ich entschied, zu binden, in der Lage sein, mehrere Dropdown-Untermenü zu machen und HTML-Code-Duplizierung zu vermeiden. Eltern> Kind (auch Elternteil)> Kind ...

Für den Kontext: In ng2_msList/msList.components.ts wird ColumnsManagements.ts als this.ColumnsManagementInstance importiert. Das innerHTML- Menü wird korrekt angezeigt, in ng2_msList/pages/list.html:

<!-- COLUMNS DROPDOWN BUTTON --> 
<ul [innerHTML]="msList.ColumnsManagementInstance.columnMenu" class="dropdown-menu" role="menu"> </ul> 

Mit (in einer sehr vereinfachten Version meines Code): (Dank dieser Stack Q)

setHtmlColumnsMenu() { 
    var self = this; 
    var htmlcolumnsmenu = ''; 
    [...] 
    htmlcolumnsmenu += this.createColumnsList(this.getNoneRelationalColumns(true)); 

    // which return something like a lot of html content and sometime in it : 
    // <a href="javascript:;" (click)="msList.ColumnsManagementInstance.toogleColumn(column)"> 
    [...] 
    return htmlcolumnsmenu; 
} 

ABER (click) = "msList.ColumnsManagementInstance.toogleColumn (column)" (zuvor im HTML-Inhalt) funktioniert nicht mehr. Es wird in der Ansicht als einfacher Text im Tag geschrieben (vor dem inneren HTML wurde es nicht angezeigt).

Ich kann nicht einen Weg, um es wieder funktioniert zu erreichen. Ich teste mehrere Möglichkeiten, um die Funktion aufzurufen oder wie ich in Web-Links wie auf der Ang Doc Section, here zum Beispiel gefunden habe. Diese Beispiele rufen eine Funktion auf, die sehr einfach in derselben Datei/demselben Kontext gesetzt wird (click) = "MyAction()", aber mit meinem Kontext kann ich keine Möglichkeit finden, sie richtig aufzurufen.

Die App-Architektur ist vielleicht nicht so wie Angular2 Click Call erwarten würde.

Answer 1

Das ist von Entwurf. Angular verarbeitet HTML, das von [innerHTML]="..." (außer Bereinigung) in keiner Weise hinzugefügt wird, nicht. Es übergibt es einfach an den Browser und das war's.

Wenn Sie HTML dynamisch hinzufügen möchten, die Bindungen enthält, die Sie brauchen es in einer Angular2 Komponente wickeln, dann kann man es beispielsweise mit Hilfe von Add ViewContainerRef.createComponent()

Ein vollständiges Beispiel sehen Angular 2 dynamic tabs with user-click chosen components

Ein weniger im Winkel Weg wäre ElementRef zu injizieren, den zusätzlichen HTML-Zugriff mit

elementRef.nativeElement.querySelector('a').addEventListener(...) 

Answer 2

Es kann zu spät sein, aber lassen Sie mich hoffen, dass jemand helfen wird.

Da wollen Sie klicken Bindung (und wahrscheinlich auch andere Bindungen), es wäre zu besser überspringen mit [innerHTML]="..." und eine innere Komponente erstellen zu dem Sie die Daten über @Input() Anmerkung passieren.

Konkret Bild haben Sie eine Komponente namens BaseComponent, wo Sie einige HTML-Code auf eine Variable Htmldata gesetzt:

let htmlData = '...<button (click)="yourMethodThatWontBeCalled()">Action</button>...' 

Dann in BaseComponent ‚s HTML Datei, die Sie binden es wie folgt:

...<div [innerHTML]="htmlData"></div>... 

Statt, dies zu tun, erstellen Sie Innere Komponente.ts:

@Component({ 
selector: 'inner-component', 
templateUrl: './inner-component.html', 
styleUrls: ['./inner-component.scss'] 
}) 
export class InnerComponent { 
    @Input() 
    inputData: any; 

    methodThatWillBeCalled(){ 
    //do you logic on this.inputData 
    } 
} 

InnerComponent 's Html-Datei:

...<button (click)="methodThatWillBeCalled()">Action</button>... 

Jetzt in BaseComponent' s Html-Datei:

...<inner-component [inputData]="PUT_HERE_YOUR_DATA"></inner-component>