时间戳

首页 > 解决方案 > 动态 HTML 容器

javascript - 动态 HTML 容器

问题描述

我需要创建动态 html，我有一个输入文本，我想在其中输入一个名称，并在按下 Enter 时创建一个容器

容器名称

 <span><i class="fas fa-users"></i> Grupo de usuarios 1</span>

代码容器

    <div class="card-top">
  <div class="card-header">
    <span><i class="fas fa-users"></i> Grupo de usuarios 1</span>
    <div class="card-header-actions save-button">
    <a href="" class="card-header-action" target="_blank">
    <small class="text-muted" (click)='saveGroup()'><i class="far fa-check-circle"></i> GUARDAR</small>
    </a>
    </div> 
  </div>

  <div class="card-body">
    <div class="pacientes-box" cdkDropList #pendingList1="cdkDropList" [cdkDropListData]="terapeutasgrupouno" [cdkDropListConnectedTo]="[pendingList3]" (cdkDropListDropped)="drop($event)">
      <div class="grupo-terapeuta" *ngFor="let item of terapeutasgrupouno" [cdkDragData]="item" cdkDrag><i class="fas fa-user-md fa-icon"></i> {{item}}</div>
      <p class="dragdrop" *ngIf="terapeutasgrupouno == ''"><i class="fas fa-user-md fa-icon"></i> Arrastra un terapeuta</p>
    </div>

    <div class="pacientes-box" cdkDropList #pendingList="cdkDropList" [cdkDropListData]="pacientesgrupouno" [cdkDropListConnectedTo]="[pendingList3]" (cdkDropListDropped)="drop($event)">
      <div class="grupo-paciente" *ngFor="let item of pacientesgrupouno" [cdkDragData]="item" cdkDrag><i class="fas fa-user-injured fa-icon"></i> {{item}}</div>
       <p class="dragdrop" *ngIf="pacientesgrupouno == ''"><i class="fas fa-user-injured fa-icon"></i> Añade pacientes</p>
    </div>
  </div>

</div>

在此处输入图像描述

在此处输入图像描述 谢谢！

标签： javascriptangulartypescriptangular7

解决方案

我认为这就是您要寻找的东西，如果我错了，请纠正我：

<input name="input" (keydown.enter)="create()" type="text"/>
<template #create></template>

我将假设您的容器 html 是它自己的组件，称为ContainerComponent：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  constructor(private factory: ComponentFactoryResolver){ } // remember to import

  @ViewChild('create', { read: ViewContainerRef }) container: ViewContainerRef;

  create(): void {
    const self = this;
    self.container.clear();
    self.container.createComponent(self.factory.resolveComponentFactory(ContainerComponent));
  }
}

这样，当您输入名称并按 Enter 键时，创建方法就会运行，并且您的容器会被创建并替换为模板标签。我希望这能让您了解一种方法来实现您想要实现的目标......

推荐阅读