如何使用角度函数显示 HTML？答案

【问题标题】：how to display HTML with angular function?如何使用角度函数显示 HTML？
【发布时间】：2020-10-08 15:50:09
【问题描述】：

我想在一个角度组件中使用类型脚本函数显示格式化的 HTML，我希望它显示来自不同类型的问题，我试过这个，

import {Component, OnInit} from '@angular/core';
import {TP, Question, Qtype} from "../tp";
import * as Exercice from '../assets/Exercice.json';

@Component({
  selector: 'app-tp',
  templateUrl: './tp.component.html',
  styleUrls: ['./tp.component.css']
})
export class TpComponent implements OnInit {


  constructor() {
  }

  ngOnInit(): void {
  }

  displayQCM(question: Question) {
    return `
      <div>
            <hr class="w-100">
            <h3>Question n°${question.number} ${question.questionType}</h3>
            <p>${question.questionContent}</p>
            ...
            QCM question element
            ...
        </div>
    `;
  }

  displayTrueOrFalse(question: Question) {
    return `
      <div>
            <hr class="w-100">
            <h3>Question n°${question.number} ${question.questionType}</h3>
            <p>${question.questionContent}</p>
            ...
            true or false question element
            ...
        </div>
    `;
  }

  displayQuestion(question: Question) {
    return `
      <div>
            <hr class="w-100">
            <h3>Question n°${question.number} ${question.questionType}</p>
            <p>${question.questionContent}</p>
            ...
            normal question element
            ...
        </div>
    `;
  }
}

<div class="row justify-content-center">
  <div class="col-12 col-lg-6">
    <h2>Questions</h2>
    {{displayQCM()}}
    {{displayQuestion()}}
    {{displayTrueOrFalse()}}
  </div>
</div>

但是 HTML 只显示为纯文本，在页面上写满了代码，你知道如何解决这个问题吗？

编辑：编辑的代码更符合上下文，问题来自 json 文件，其中有 3 种类型，我创建了一个函数将它们转换为 Question 并根据类型我想要 3 种显示方式它们以 3 种不同的形式呈现，每种类型都作为一个长的 HTML 开发，并以不同的标签和元素显示

【问题讨论】：

在这里这样做有什么意义？要注入 html，你需要使用 [innerHtml]
您可以找到几种解决方案：ng-template 是一个用于渲染 HTML 模板的 Angular 元素，Renderer2 类允许您操作/创建 DOM 元素
有没有更好的方法从对象列表生成 HTML？

标签： html angular typescript angular-cli

【解决方案1】：

您需要在 html 文件中使用 [innerHTML] 属性

<div class="row justify-content-center">
  <div class="col-12 col-lg-6">
    <h2>Questions</h2>
   <div [innerHTML]="displayQCM()"></div> 
    <div [innerHTML]="displayQuestion()"></div>
    <div [innerHTML]="displayTrueOrFalse()"></div>
  </div>
</div>

【讨论】：

【解决方案2】：

如果你只是想注入动态内容，你需要清理你的 html 字符串，然后使用 innerHtml。根据您的问题，我不确定目标是什么，并且必须有更好的方法而不注入 Html，但您需要明确目标。

questions: Array<SafeHtml> = new Array<SafeHtml>();
myJson: Array<string> = []; //I dont know where its coming from

  constructor(private sanitizer: DomSanitizer) {
  }

  ngOnInit(): void {
      myJson.forEach((question) => { 
          this.questions.push(this.sanitizer.sanitize(question)); 
      })
  }

  <div class="row justify-content-center">
    <div class="col-12 col-lg-6">
      <h2>Questions</h2>
      <div *ngFor="let q of questions" [innerHtml]="q"></div>
    </div>
  </div>

【讨论】：

如果我不知道会有多少问题，我该怎么办？
你可以构建一个经过清理的 html 数组。但问题从何而来？
来自 json 文件
@lolozemadnessgamer 已编辑，我认为类似的方法会起作用，但如果没有其他方法可以在模板中对问题进行硬编码并动态显示/隐藏它们。另一件事是我认为 json 是一个 Array 在你的情况下可能是错误的。

【解决方案3】：

为什么不使用 ngFor 列出所有问题？

HTML

<div class="row justify-content-center">
      <div class="col-12 col-lg-6">
        <h2>Questions</h2>
             <div *ngFor="let question of allQuestions">
                <hr class="w-100">
                <h3>Question n°{{question.number}} {{question.questionType}}</h3>
                <p>{{question.questionContent}}</p>
            </div>
      </div>
    </div>

allQuestions 是你的问题数组

您可以使用 *ngIf: 根据问题类型添加条件：

 <p *ngIf="question.questionType=== 'normal'"></p>

或者你可以使用 ng-template:

<ng-template [ngIf]="question.questionType === 'normal'">Your HTML code for normal question</ng-template>
<ng-template [ngIf]="question.questionType === 'trueFalse'">Your HTML code for trueFalse question</ng-template>

【讨论】：

【解决方案4】：

示例 TS：

displayQCM : boolean;
displayQuestion : boolean;
displayTrueOrFalse : boolean;

HTML

<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div *ngIf="displayQCM">...</div>
<div *ngIf="displayQuestion">...</div>
<div *ngIf="displayTrueOrFalse">...</div>
</div>
</div>

【讨论】：