динамически вставить мат-флажок

Question

Я хочу динамически вставить элемент <mat-checkbox> в компонент. и я вставил два <mat-checkbox> элемента. один вставляется статически (т.е. непосредственно в файл шаблона).

, а другой вставляется динамически, и содержит <mat-checkbox> и еще один нормальный флажок <input type="checkbox" />

первый (статически) вставлен один) отображается без проблем.

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

, но динамически вставленный <mat-checkbox> не отображался должным образом.

component. html:

<mat-checkbox> checkbox (static) </mat-checkbox>

<div [innerHTML] = "test2">

component.ts:

 this.test= ` 
     <mat-checkbox>mat-checkbox</mat-checkbox><br />
     <input type="checkbox" /> normal checkbox   
  `

  this.test2 = this.sanitizer.bypassSecurityTrustHtml(this.test);

Я создал репродукцию на стеке:

https://stackblitz.com/edit/angular-hsjevo

также мне нужно создать флажки из категорий и добавить несколько лишних пробелов перед каждой подкатегорией

, то есть:

• категория
  • подкатегория
    • подкатегория
• категория2

каждая категория или подкатегория -категория <mat-checkbox value="$id"> $title

Answer 1

inner HTML свойство тега div может только анализировать и отображать обычные HTML элементы, такие как input, et c. Для динамического создания Angular компонентов, таких как mat-checkbox, вам необходимо сообщить Angular об этих компонентах. Давайте посмотрим, как это можно сделать ниже:

Нам нужен заполнитель в шаблоне AppComponent, где мы можем динамически добавлять компонент mat-checkbox. В этом случае мы можем использовать тег <ng-template> в качестве заполнителя.

app.component. html

<mat-checkbox>mat-checkbox (static)</mat-checkbox> <hr />


dynamic angular component:<br/>
<ng-template #placeholder></ng-template>

В файле машинописи AppComponent нам нужно обратитесь к этому заполнителю и добавьте компонент mat-checkbox. Найдите встроенные комментарии для объяснения.

app.component.ts

import {
  Component,
  ComponentFactoryResolver,
  OnInit,
  Renderer2,
  ViewChild,
  ViewContainerRef
} from '@angular/core';
import {MatCheckbox} from '@angular/material';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  // Get reference to the ng-template placeholder tag
  @ViewChild('placeholder', {read: ViewContainerRef, static: true}) placeholder: ViewContainerRef;

  constructor(
    private resolver: ComponentFactoryResolver,
    private renderer: Renderer2) {}

  ngOnInit() {
    this.createComponent();
  }

  createComponent() {
    // creating the mat-checkbox tag body content
    let content = this.renderer.createText(' mat-checkbox (dynamic)');
    // clear any previously appended element or component
    this.placeholder.clear();
    // resolve the MatCheckbox component and get the factory class to create the component dynamically
    let factory = this.resolver.resolveComponentFactory(MatCheckbox);
    // create the component and append to the placeholder in the template
    let ref = this.placeholder.createComponent(factory);
    // set the mat-checkbox body content
    (ref.location.nativeElement as HTMLElement).appendChild(content);
  }
}

Для того, чтобы вышеуказанный код работал, нам нужно сообщить Angular, что мы ожидаем разрешения компонента MatCheckbox во время выполнения. Внесите следующие изменения в app.module.ts.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule, MatCheckbox } from '@angular/material';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';


@NgModule({
  imports:      [ BrowserModule, FormsModule, MatCheckboxModule ],
  declarations: [ AppComponent, HelloComponent ],
  // Inform Angular about those components which will be created dynamically by including them in entryComponents field
  entryComponents: [ MatCheckbox ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Теперь вы должны увидеть динамически создаваемый флажок mat во время выполнения. Смотрите полный пример здесь (https://stackblitz.com/edit/angular-e7vhue)

Для получения дополнительной информации см. article .

Надеюсь, что это помогло вашему запросу.