TypeScript - добавление HTML в элемент контейнера в Angular 2

Ответ 1

1.

<div class="one" [innerHtml]="htmlToAdd"></div>

this.htmlToAdd = '<div class="two">two</div>';

См. также В RC.1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки

2. В качестве альтернативы

<div class="one" #one></div>

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

или для предотвращения прямого доступа к DOM:

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
}

3. 3.

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.one');
  d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

Ответ 2

С новым угловым классом Renderer2

constructor(private renderer:Renderer2) {}

  @ViewChild('one', { static: false }) d1: ElementRef;

  ngAfterViewInit() {
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('two');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }

Ответ 3

Вы можете сделать что-то вроде этого:

htmlComponent.ts

htmlVariable: string = "<b>Some html.</b>";//это html в коде TypeScript, который вам нужно отобразить

htmlComponent.html

<div [innerHtml]="htmlVariable"></div>//это то, как вы отображаете html-код из TypeScript в свой html

Ответ 4

Существует лучшее решение для этого ответа, основанного на Angular.

• Сохраните строку в переменной в файле .ts

  MyStrings = ["one","two","three"]

• В html файле используйте * ngFor.

  <div class="one" *ngFor="let string of MyStrings; let i = index"> <div class="two">{{string}}</div> </div>

• если вы хотите динамически вставлять элемент div, просто нажимайте больше строк в массив MyStrings

  myFunction(nextString){ this.MyString.push(nextString) }

таким образом каждый раз, когда вы нажимаете кнопку, содержащую myFunction (nextString), вы эффективно добавляете еще один class= "два" div, который действует так же, как вставка его в DOM с чистым javascript.

Ответ 5

Не нужно вставлять html с использованием javascript вместо ng-if или директивы.

https://docs.angularjs.org/api/ng/directive/ngIf

Ответ 6

При работе с Angular недавнее обновление Angular 8 показало, что свойство static внутри @ViewChild() необходимо, как указано здесь и здесь. Тогда ваш код потребует этого небольшого изменения:

@ViewChild('one') d1:ElementRef;

в

// query results available in ngOnInit
@ViewChild('one', {static: true}) foo: ElementRef;

ИЛИ

// query results available in ngAfterViewInit
@ViewChild('one', {static: false}) foo: ElementRef;