Динамические HTML-контейнеры - PullRequest
Новая
       1

Динамические HTML-контейнеры

0 голосов
/ 23 апреля 2019

Мне нужно создать динамический HTML, у меня есть входной текст, в котором я хочу ввести имя и при нажатии введите контейнер создает

Название контейнера 

 <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 Thnx!

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Здравствуйте, @Ashwyb Хортон, спасибо за ваш ответ.У меня есть один компонент под названием 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>
0 голосов
/ 23 апреля 2019

Я думаю, это то, что вы ищете, поправьте меня, если я ошибаюсь: 

<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));
  }
}

Так что, когда вы вводите имя и нажимаете ввод, запускается метод create, и ваш контейнер создается и заменяется тегом шаблона. Я надеюсь, что это дает вам представление об одном подходе к тому, чего вы пытаетесь достичь ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...