Angular 2 innerHTML (click) binding

Question

У меня было такое большое html-меню, которое я решил привязать, чтобы иметь возможность выпустить несколько подменю и избежать дублирования кода HTML. Родительский> ребенок (который тоже является родителем)> дочерний ...

Для контекста: В ng2_msList/msList.components.ts импортируется ColumnsManagements.ts как this.ColumnsManagementInstance. меню innerHTML отображается правильно, в ng2_msList/страниц/list.html:

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

С (в очень упрощенном варианте моего кода): (Благодаря этому 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; 
} 

BUT (click) = "msList.ColumnsManagementInstance.toogleColumn (column)" (ранее в содержимом html) больше не работает. Он пишет в представлении как простой текст в теге (до того, как innerHtml не был отображен).

Я не могу дотянуться, чтобы заставить его работать снова. Я тестирую несколько способов вызова функции или, как я нашел в веб-ссылках, например, на Ang Doc Section, here. Эти примеры вызывают функцию, которая очень легко устанавливается в том же файле/контексте (щелкните) = «MyAction()», но с моим контекстом я не могу получить способ правильно называть его.

Архитектура приложения, возможно, не так, как ожидал бы звонок Angular2.

Answer 1

Это по дизайну. Угловой не обрабатывает HTML, добавленный [innerHTML]="..." (кроме санировки) любым способом. Он просто передает его в браузер и все.

Если вы хотите добавить HTML динамически, который содержит привязки, нужно обернуть его в компоненте Angular2, то вы можете добавить его, используя, например ViewContainerRef.createComponent()

Для полного примера см Angular 2 dynamic tabs with user-click chosen components

Менее Angulary способ будет вводить ElementRef, доступ к добавляемые HTML, используя

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

Answer 2

Это может быть слишком поздно, но позвольте мне надеяться, что собирается помочь кому-то.

Поскольку вы хотите нажать связывания (и, возможно, другие привязки), было бы лучше пропустить с помощью [innerHTML]="..." и создают внутренний компонент, к которому вы передаете данные через @Input() аннотацию.

В частности, изображение у вас есть компонент под названием BaseComponent где вы установили некоторый HTML код переменной htmlData:

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

Затем в HTML файл BaseComponent «s вам привязать его, как показано ниже:

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

Вместо делать это, вы создаете InnerComponent.ц:

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

'Html файл s:

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

Сейчас в BaseComponent' InnerComponent Html файл s:

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