Внутренний HTML-код ng-container, Angular 4?

Я хочу динамически разместить html-код в моем html-коде, поэтому напишу следующий код:

<ng-container [innerHTML]="buttonIcon"></ng-container>

Angular говорит, что innerHTML недействительный атрибут для ng-container
Я не хочу использовать третий тег html, например:

<div [innerHTML]="buttonIcon"></div>

Итак, как я могу вставлять html-коды без привязки внутреннего тэга int?

Ответ 1

Вы можете использовать ngTemplate:

<ng-template #buttonIcon>
    <div> Your html</div>
</ng-template>
<ng-container 
   *ngTemplateOutlet="buttonIcon">
</ng-container>

Ответ 2

** Пожалуйста, прочитайте комментарии. Этот ответ может быть неправильным. Я не знаю, не смотрел на это снова **

ng-container не отображается в html, это просто структурная директива.

Angular - это группирующий элемент, который не мешает стилям или макету, поскольку Angular не помещает его в DOM.

Таким образом, нет элемента, чтобы поместить html в. Вам нужно работать с подразделом. Если, по вашему мнению, нет необходимости в sub-div, вы можете просто заменить ng-container на сам div и вообще не использовать контейнер.

Ответ 3

Если по какой-либо причине вам нужно заменить элемент DOM, вы можете использовать div с id, а затем использовать @ViewChild декоратор и ElementRef, чтобы получить доступ к nativeElement из контроллера и установите свойство outerHtml.

app.component.tml

<div #iconButton></div>

app.component.ts

import { Component, ViewChild, ElementRef, ViewEncapsulation, AfterViewInit }from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  implements AfterViewInit{
   @ViewChild('iconButton')
    iconButton: ElementRef;

    ngAfterViewInit(){
      this.iconButton.nativeElement.outerHTML = '<button>My button</button>'
    }
}

Мы не должны использовать ни один из них в качестве политики инкапсуляции, поскольку наш шаблон содержит только заменяемый элемент div.

Пример Stackblitz: https://stackblitz.com/edit/angular-fa1zwp

Ответ 4

[outerHTML]

сделает все возможное, чтобы заменить внешний элемент.

В вашем случае

<div [outerHTML]="buttonIcon"></div>

Это правда, что важно иметь чистую структуру HTML, например, сохраняя правила CSS как можно проще.