angular - 动态插入垫复选框

Question

我想动态插入一个<mat-checkbox>元素变成一个组件。我插入了两个 <mat-checkbox>元素。一个静态插入(即直接插入模板文件)。

另一个是动态插入的，包含一个<mat-checkbox>和另一个普通复选框 <input type="checkbox" />

第一个(静态插入的)渲染没有任何问题。

动态插入的正常输入也没有任何问题。

但是<mat-checkbox>动态插入的未按预期呈现。

组件.html:

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

<div [innerHTML] = "test2">

组件.ts:

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

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

我在 stackblitz 上创建了一个复制品:

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

我还需要根据类别创建复选框，并在每个子类别前附加一些额外的空格

即:

• 类别
  • 子类别
    • 子类别的子
• 类别 2

每个类别或子类别是<mat-checkbox value="$id"> $title

Answer 1

div 标签的 innerHTML 属性只能解析和渲染常规的 HTML 元素，如 input 等。要动态创建像 mat-checkbox 这样的 Angular 组件，你需要通知 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 typescript 文件中，我们需要引用这个占位符并附加 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-checkbox。在此处查看完整示例 (https://stackblitz.com/edit/angular-e7vhue)

有关更多信息，请参阅此 article .

希望这对您的查询有所帮助。