Question

我想使用HTML标签更改代码中的特定单词，并使用 themecolor 类更改文本的样式。

<h2 class="mb-30" [innerHTML]="main_title"></h2>

结果预览：

这是文本。

我想将<span class="themecolor">text</span>替换为text。

我使用Angular 6构建了我的应用程序

Answer 1

由于Angular是基于组件的位置，因此通过选择器注入了html，因此不确定为什么需要这种功能。

无论如何， stackblitz

bindind在您希望的这一行中发生：

<h2 class="mb-30" [innerHTML]="main_title"></h2>

我要做的就是在 app.component.ts

中使用您选择的自定义HTML实例化 main_title 。

此外，请注意，我使用了 ngDoCheck 来检测文本输入的变化。

这将允许您在文本框内输入 HTML （实际上称为textarea）。

Answer 2

在@angular/core中使用渲染器2

ts文件

import { Component, OnInit, Input, ViewChild, ElementRef, Renderer2 } from '@angular/core';

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

  @Input() public text: string;
  @ViewChild('container') public container: ElementRef;
  constructor(private renderer: Renderer2) { }

  ngOnInit()
  {
    const span = this.renderer.createElement('span');
    this.renderer.addClass(span, 'my-class');
    const text = this.renderer.createText(v.text);
    this.renderer.appendChild(span, text);

    this.renderer.appendChild(this.container.nativeElement, div);
  }
}

HTML文件

<div #container></div>

Answer 3

property: string = "Text";

Use [innerText]="property"
<p [innerText]="property/variable"></p>

这会将文本插入html

用文本Angular 6替换HTML标签

3 个答案: