Заменить HTML-тег с текстом Angular 6

Question

Я хочу изменить определенное слово в своем коде с помощью тега HTML и изменить стиль моего текста с помощью themecolor class.

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

Предварительный просмотр результата:

Это текст.

Я хочу заменить <span class="themecolor">text</span> на text.

Я построил свое приложение с Angular 6

Answer 1

Не знаю, зачем вам такая функциональность, так как Angular основан на компонентах, где вы вводите html через селекторы.

Во всяком случае, stackblitz

Привязка происходит так, как вы хотели в этой строке:

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

Все, что я делаю, это создаю экземпляр main_title с пользовательским HTML по вашему выбору в app.component.ts

Также обратите внимание, что я использовал ngDoCheck , чтобы обнаружить изменения при вводе текста.

Это позволит вам ввести HTML внутри текстового поля (на самом деле предпочтительнее, чем текстовое поле).

Answer 2

используйте Renderer 2 in @ angular / core

файл 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