angular - 如何在原始 html 中使用 Angular 5 组件

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>

标签： angularangular5

Answer 1

尽管它在 Angular 6 中运行，但这可能不是“最干净”的方法。

首先，我使用以下 ng 命令创建了一个名为dummy.ts的组件，[您可以将其命名为任何您想要的名称...]

ng generate component dummy

在dummy.ts组件内容中添加任何内容之前，我首先需要定义一个管道文件。为方便起见，我使用以下 ng 命令在同一dummy.ts组件文件夹中生成了管道：

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 希望这会有所帮助；）