Динамический DOM, ElementRef не получает аргументы углового события - PullRequest
Новая
       34

Динамический DOM, ElementRef не получает аргументы углового события

0 голосов
/ 25 апреля 2019

Я создаю компонент, который динамически генерирует DOM.

Мой компонент - это таблица, и у меня есть директива, которую я использую для генерации столбцов. Моя директива владеет ElementRef, который я использую внутри моего компонента.

Моя директива: 

@Directive({
  exportAs: 'p-tabela',
  selector: 'p-tabela, [p-tabela]'
})
export class PTabelaDirective {

    @Input()
    value: string;
    @Input()
    descricao: string;
    @Input()
    isHtml: boolean = false;


    constructor( public html: ElementRef) {

  }

Мой родительский HTML 

 <tabela id="teste"  [data]="paginaTabela" (consultar)="testeTabelaPaginada($event)">
     <p-tabela value="id" descricao="ID"></p-tabela>
     <p-tabela value="nome" descricao="Nome"></p-tabela>

     <p-tabela value="teste" descricao="Acoes" isHtml="true">
            <button (click)="teste()" click="teste" class="teste"  [teste]="teste">Excluir</button>
     </p-tabela>
    </tabela>

Внутри моего компонента я собираю теги директив и создаю массив для итерации с помощью ngFor. 

...
  @ContentChildren(PTabelaDirective) colunas: QueryList<PTabelaDirective>;

...

  ngAfterViewInit() {

        if(this.colunasParams){
            this.colunas.forEach(item => {
                this.colunas.push(
                        {
                            'value' : item.value,
                            'descricao': item.descricao,
                            'isHtml': item.isHtml,
                            'getHeader': function(){
                                return this.descricao ? this.descricao : this.value;
                            },
                            'html': item.html
                        }
                );
            });
        }
    }

My ngFor 

<tr *ngFor="let result of data.content let j = index">
            <td  *ngFor="let coluna of colunas let i = index" #colunaNgForTd>{{coluna.isHtml ? addHtml(colunaNgForTd, coluna.html) : result[coluna.value]}} </td>
        </tr>

Внутри цикла я вызываю метод, передающий ссылку td и ссылку ElemtentRef.

Способ 

     addHtml(el, html:ElementRef){

         el.innerHTML = html.nativeElement.innerHTML;

       //this.resolver.resolveComponentFactory(el);
     }

Проблема в том, что "html.nativeElement.innerHTML" не имеет угловых атрибутов.

Результат: https://imagizer.imageshack.com/img924/736/oGSWDM.png

как мне получить весь HTML-контент? включая угловые параметры.

Извините за мой английский:)

...