动态HTML容器

时间：2019-04-23 06:56:36

标签： javascript angular typescript angular7

我需要创建动态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>

enter image description here

enter image description here 谢谢！

2 个答案:

答案 0 :(得分：0)

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

<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键时，将运行create方法，并将创建的容器替换为template标记。我希望这能为您提供一种尝试实现目标的方法的想法...

答案 1 :(得分：0)

您好，@ Ashwyb horton thanx，谢谢您的答复。我有一个名为gruposcomponent.ts，.html的组件。在此文件中，我所有的html都可以，我尝试... 

 import { ComponentFactoryResolver, Component, OnInit, Input, ViewChild, Directive, ViewContainerRef } from '@angular/core';
    import { copyArrayItem, CdkDragStart, CdkDragExit, CdkDragEnter, CdkDragEnd, DragDropModule, CdkDragDrop, moveItemInArray, transferArrayItem, CdkDrag } from '@angular/cdk/drag-drop';

    @Component({
      selector: 'app-grupos',
      templateUrl: './grupos.component.html',
      styleUrls: ['./grupos.component.css']
    })
    export class GruposComponent implements OnInit {

      constructor(private factory: ComponentFactoryResolver){ 
      } 
      @ViewChild('create', { read: ViewContainerRef }) container: ViewContainerRef;

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


  ngOnInit() {
  }

  papelera = [];
    pacientesgrupouno = [];
  terapeutasgrupouno = [];
  grupo2 = [];

    terapeutas = [
    'Ana lopez',
    'Erica sanchez',
    'Marta Sanchez',
    'Mario Gonzales',
    ];

    pacientes = [
    'Emilio Escobar',
    'Daniel Bobis',
    'Gustavo Verdejo',
    'Pablo Ramos'
    ];

  droptrash(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    console.log('dropped Event', `> dropped '${event.item.data}' into '${event.container.id}'`);
    moveItemInArray(
      event.container.data, 
      event.previousIndex, 
      event.currentIndex);
  } else {
      console.log('dropped Event', `> dropped '${event.item.data}' into '${event.container.id}'`);
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }

  drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    console.log('dropped Event',`> dropped '${event.item.data}' into '${event.container.id}'`);
    moveItemInArray(
        event.container.data, 
        event.previousIndex, 
        event.currentIndex);
  } else {
      console.log('dropped Event',`> dropped '${event.item.data}' into '${event.container.id}'`);
      copyArrayItem(
          event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }

  saveGroup(){
    console.log(this.grupo2);   
  }
}

我的html是.. 

    <div class="row" id="create-groups">

  <!-- PRIMERA COLUMNA -->
  <div class="col-md-8">
    <div class="form-group top-search">
        <div class="form-group has-add-group">
          <span class="fas fa-users form-control-group"></span>
          <input type="text" (keydown.enter)="create()" class="form-control" placeholder="Nombre del nuevo grupo...">
        </div>
    </div>
    <!-- PRIMER BLOQUE -->
    <template #create></template>

    <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="terapeutas-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>

    <!-- SEGUNDO BLOQUE -->
    <div class="card card-bottom">
      <div class="card-header">
        <span><i class="fas fa-users"></i> Grupo de usuarios 2</span>
      </div>
      <div class="card-body" cdkDropList #pendingList2="cdkDropList" [cdkDropListData]="grupo2" [cdkDropListConnectedTo]="[pendingList3]" (cdkDropListDropped)="drop($event)">
        <div class="grupo-paciente" *ngFor="let item of grupo2" [cdkDragData]="item" cdkDrag><i class="fas fa-user-injured fa-icon"></i> {{item}}</div>
      </div>
    </div>
  </div>

  <!-- SEGUNDA COLUMNA -->
  <div class="col-md-2">
    <!-- PRIMER BLOQUE -->
    <div class="card card-bottom">
      <div class="card-header">
        <span><i class="fas fa-users"></i> Pacientes</span>
      </div>
      <div class="card-body" cdkDropList #pacientesList="cdkDropList" [cdkDropListData]="pacientes" [cdkDropListConnectedTo]="[pendingList, pendingList2]" (cdkDropListDropped)="drop($event)">
        <div class="form-group">
            <div class="form-group has-search">
              <span class="fa fa-search form-control-feedback"></span>
              <input type="text" class="form-control" placeholder="Buscar...">
            </div>
        </div>
        <div class="paciente" *ngFor="let item of pacientes" [cdkDragData]="item" cdkDrag><i class="fas fa-user-injured fa-icon"></i> {{item}} </div>
      </div>
    </div>
  </div>

  <!-- TERCERA COLUMNA -->
  <div class="col-md-2">
    <!-- PRIMER BLOQUE -->
    <div class="card card-bottom">
      <div class="card-header">
        <span><i class="fas fa-users"></i> Terapeutas</span>
      </div>
      <div class="card-body" cdkDropList #terapeutasList="cdkDropList" [cdkDropListData]="terapeutas" [cdkDropListConnectedTo]="[pendingList1]" (cdkDropListDropped)="droptrash($event)">
        <div class="form-group">
            <div class="form-group has-search">
              <span class="fa fa-search form-control-feedback"></span>
              <input type="text" class="form-control" placeholder="Buscar...">
            </div>
        </div>
        <div class="terapeuta" *ngFor="let item of terapeutas" [cdkDragData]="item" cdkDrag><i class="fas fa-user-md fa-icon"></i> {{item}} </div>
      </div>
    </div>

    <!-- SEGUNDO BLOQUE -->
    <div class="card card-bottom card-trash">
      <div class="card-header">
        <span><i class="fas fa-trash"></i> Papelera</span>
      </div>
      <div class="card-trash-body" cdkDropList #pendingList3="cdkDropList" [cdkDropListData]="papelera" [cdkDropListConnectedTo]="[pendingList, pendingList2]" (cdkDropListDropped)="droptrash($event)">
        <img class="papelera" src="assets/images/trash.svg" alt="papelera">
      </div>
    </div>
  </div>
</div>
相关问题
最新问题