Ionic3 - ионный элемент / компонент не работает во внутреннем HTML - PullRequest
Новая
       22

Ionic3 - ионный элемент / компонент не работает во внутреннем HTML

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

Я создаю динамический HTML в компоненте, но обычный ионный стиль не работает.

В html: 

<div [innerHTML]="testHtml"> </div>

В компоненте (ts) 

public testHtml = "<button color='secondary' ion-button>Default</button>";

Я также пытался доверять html, используя pipe, но из-за этого работает только встроенный стиль:

В трубе: 

this.sanitizer.bypassSecurityTrustHtml(html);

Ответы [ 2 ]

0 голосов
/ 16 июля 2019

Угловая санация всего динамически добавляемого HTML.

Решение было простым - использование канала

import {Pipe, PipeTransform} из '@ angular / core';import {DomSanitizer} из "@ angular / platform-browser"; 

@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

}

И с помощью тега innerHTML и добавьте свой канал 

<div [innerHTML]="question | safeHtml"></div>

Работает здесь.

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

Эта проблема аналогична Ионная кнопка, показывающая, что «ion-button» не является известным элементом

Поскольку ionic - это фреймворк поверх angular, angular не может ни анализировать ионные пользовательские элементы, ни применять правильный CSS к нему, потому что синтаксический анализ происходит до добавления innerHTML.

Итак, на этой заметке я бы предложил не создавать элементы в директиве innerHTML. Пусть использование innerHTML останется с форматированием текста.

Angular предназначен для помещения html-элементов в html-шаблон (файл .html или свойство template:). Что бы вы ни делали, вы хотите создать html внутри innerHTML, вы можете поместить его в файл .html следующим образом и просто поместить директиву [ngIf] , чтобы показать или скрыть элемент или, возможно, использовать [ngClass] директива для добавления определенного класса к элементу. 

<div>
    <button [ngIf]="someTrueCondition; else showTheOtherElement" color='secondary' ion-button>Default</button>
    <ng-template #showTheotherElement>
        <button  color='primary' ion-button>Default</button>
    </ng-template>
</div>
...