Содержание HTML не отображается при использовании шаблона в угловых 6 - PullRequest
0 голосов
/ 26 ноября 2018

Я занимаюсь созданием динамического шаблона на основе следующего примера. пример но я не могу получить вывод html.т.е. динамический контент.TS файл:

@Component({
  selector: 'product-item',
  template: `
    <div class="product">
      <ng-container *compile="template; context: this"></ng-container>
    </div>`,
})
export class DynamicItemComponent {

  @Input() content: string = `<a (click)='changeEditor('TEXT')'>Click me</a>`;  
  @Input() template: string = `{{content}}`;

}

HTML:

<product-item [content]="selectedTemplate.content"></product-item>

Как я могу получить вывод HTML.я уже использовал safethtml pipe, который тоже не работает.Заранее спасибо.

1 Ответ

0 голосов
/ 26 ноября 2018

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

<ng-template #anchorRef>
   <a (click)="changeEditor('TEXT')">Click me</a>
</ng-template>

Вы можете передать этот templateRef в качестве входных данных дочернему компоненту, используя @Input decorator.

Дочерний компонент:

Использование структурной директивы * ngTemplateOutlet,

@Component({
  selector: 'hello',
  template: `
  <h1>Hello !</h1>
  <ng-container *ngTemplateOutlet="name"></ng-container>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: TemplateRef<any>;
}
...