Angular интерполировать внутри компонента, например, mat-checkbox

Question

Итак, я хочу, чтобы компонент mat-checkbox содержал строку HTML внутри метки.

Я попробовал следующее:

<mat-checkbox class="check">
    {{ someHtml }}
</mat-checkbox>

Но он печатает HTML строка как строка и не отображает ее.

Использование следующего также не работает:

<mat-checkbox class="check" [innerHtml]="someHtml">
</mat-checkbox>

Это просто заменяет весь контент, включая флажок, который генерируется во время выполнения , Есть ли способ вставить html в этикетку?

Answer 1

Вы можете использовать Angular Директивы
Идея здесь состоит в том, чтобы извлечь элемент из HTML, а затем динамически добавить немного HTML.

Supose this сценарий

app.component. html

<mat-checkbox class="check" [appendHtml]="innerHtml"></mat-checkbox>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  innerHtml = `<div style="border: 1px solid red;"> Text inside </div>`;
  constructor() {}
}

Как видите, я добавил appendHtml атрибут элемента mat-checkbox. Это пользовательская директива, которая ожидает строку как «raw» HTML.

append- html .directive.ts

@Directive({
  selector: '[appendHtml]'
})
export class AppendHtmlDirective implements AfterViewInit {
  @Input('appendHtml') html: string

  constructor(private element: ElementRef) {
  }

  ngAfterViewInit() {
    const d = this.element.nativeElement.querySelector('label');
    d.insertAdjacentHTML('beforeend', this.html);
  }
}

AppendHtmlDirective ожидает html свойство типа string и реализует интерфейс AfterViewInit (из Angular) для извлечения элемента после его визуализации. Инъекцией Angular предоставляет нам элемент, который применяется; таким образом, ElementRef из конструктора является нашим элементом MatCheckbox, в этом случае.
Мы можем использовать функцию insertAdjacentHTML для добавления дочерних элементов к элементу. Я только что получил элемент label из MatCheckbox, чтобы уместить его внутри. В любом случае вы должны увидеть, куда добавить HTML.
Я имею в виду, label здесь работает, b c MatCheckbox имеет тег, соответствующий этому. Если вы хотите повторно использовать эту Директиву для других элементов, вам следует передать литерал, чтобы найти его внутри.
т.е.:
append-hmtl.directive.ts

// ...
@Input() innerSelector: string
// ...
 ngAfterViewInit() {
    const d = this.element.nativeElement.querySelector(this.innerSelector);
    d.insertAdjacentHTML('beforeend', this.html);
 }

app.component.hmtl

<mat-checkbox class="check" [appendHtml]="innerHtml" innerSelector="label"></mat-checkbox>

Более того, вы можете передать столько входных данных, сколько вам нужно для настройки стиля или поведения вашей директивы.

Cheers

Answer 2

Я думаю, вы должны просто обернуть все в div и поместить его снаружи.

<div>
<mat-checkbox class="check"> </mat-checkbox>
{{ someHtml }}
</div>