Как использовать угловые 5 компонентов в сыром HTML

Question

У меня есть компонент с функцией onClick, который возвращает HTML-код с угловым компонентом, и я хочу показать его в шаблоне. Как я могу это сделать?

Потому что в текущем состоянии я получаю только «Тестовый код», без демокомпонента.

export class AppComponent {
  title = 'app';

  content;

  onClick(){
    console.log("Clicked!")
    this.content = "Test code <democomponent></democomponent>";
  }
}

 <div>
  <button (click)="onClick()">Click</button>
<div>
  <div [innerHtml]="content"></div>
</div>
</div>

Answer 1

Возможно, это не самый «чистый» подход, хотя он работает в Angular 6.

Сначала я создал компонент с именем dummy.ts , [вы можете назвать его любым именем, которое захотите...] используя следующую команду ng

ng generate component dummy

Прежде чем добавлять что-либо в dummy.ts содержимое компонента, мне сначала нужно было определить файл канала.Для удобства я сгенерировал канал в той же папке компонента dummy.ts , используя следующую команду ng:

ng generate pipe SafeHtml

Затем я добавил следующий код:

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

@Pipe({
 name: 'safeHtml'
})

export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitized: DomSanitizer) {}

  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
}}

Наконец, в dummy.ts я добавил этот очень простой базовый код.

import { Component, OnInit } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
import { SafeHtmlPipe } from './safe-html.pipe';

@Component({
  selector: 'app-dummy',
  templateUrl: './dummy.component.html',
  styleUrls: ['./dummy.component.css']
})

export class DummyComponent implements OnInit {
   name:string;
   safeHtmlContent : string;
   dummyContent : string;

   onClick(){
     this.safeHtmlContent  = this.dummyContent;
   }

  constructor() {
    this.dummyContent  = '<h4>Some dummy title</h4><p>Some blah blah blah blah blah... dummy content</p>';
  }}

и в dummy.html я просто добавил следующее:

<div>
 <button (click)="onClick()">Click</button>
</div>

<div [innerHtml]="safeHtmlContent"></div>

В результате при нажатии на кнопку отображается ожидаемый необработанный HTML
Надеюсь, это поможет;)