Как открыть модал из углового компонента на странице, заполненной несколькими компонентами

Question

@import '../../theme/conf';
.edit-input {
    padding: 0 2%;
    width: 100%;
    height: 30px;
    margin: 7px 0;
    background: transparent;
    border: 1px solid $fonts-color;
    outline: none;
    border-radius: 0;
}

.todolist-wrap {
    padding-bottom: 13px;
}

.form-group {
    margin: 0;
    display: flex;
}

.new-task-input {
    display: block;
    margin: 0 10px;
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid $border-color;
    outline: none;
    @include transition(all 1s);
    &:focus {
        border-bottom: 1px solid $primary;
    }
}

.task-list {
    border-radius: 5px;
    @include transition(all 0.4s);
    &:hover {
        background: rgba($primary, .8);
        .edit-input,
        .enter-task-edit,
        .cancel-task-edit {
            border: 1px solid $white;
        }
    }
}

.list-text,
.list-over {
    display: inline-block;
    flex: 1;
    width: 100%;
    height: 39px;
    line-height: 40px;
    text-align: left;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.list-over {
    text-decoration: line-through;
}

.cyclo-btn {
    position: relative;
    top: 19px;
    right: 10px;
}

.over-btn {
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    @include center(40px, 39px);
    .fa-square-o {
        margin-left: -2px;
    }
}

.enter-task-edit,
.cancel-task-edit {
    width: 30px;
    margin: 7px 0;
    background: transparent;
    border: 1px solid $fonts-color;
    border-left: none;
    border-radius: 0;
    outline: none;
    &:hover {
        background: rgba($white, .1);
    }
}

Я пытался запустить мой модал с углового компонента на странице с несколькими компонентами, но, к сожалению, мое приложение перестало работать и приложение зависало.

import { Component, OnInit } from '@angular/core';
import { TodoListService } from './todolist.service';
import {Task} from '../../models/task.model';
import swal from "sweetalert2";
@Component({
  selector: 'du-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.scss'],
  providers: [TodoListService]
})

export class TodolistComponent implements OnInit {

  todolist: Array<any> = [];
  newTaskText: string;


  constructor(private todoListService: TodoListService) { }

  ngOnInit() {
    this.todoListService.getTasksByUserId(221).subscribe(
      (item: Task[]) => {
        this.todolist = item;
    });
    this.todolist.forEach(item => {
      item.isOver = false;
      item.isEdit = false;
      item.editText = item.title;
    });
  }

  edit(index) {
    if (!this.todolist[index].isOver) {
      this.todolist[index].editText = this.todolist[index].text;
      this.todolist[index].isEdit = true;
    }
  }

  overMatter(index) {
    if (!this.todolist[index].isEdit) {
      this.todolist[index].isOver = !this.todolist[index].isOver;
    }
  }

  enterTaskEdit(index) {
    this.todolist[index].text = this.todolist[index].editText;
    this.todolist[index].isEdit = false;
  }

  cancelTaskEdit(index) {
    this.todolist[index].isEdit = false;
  }

  creatNewTask() {
    const newTask = new List;
    newTask.isEdit = false;
    newTask.isOver = false;
    newTask.text = this.newTaskText;
    this.todolist.unshift(newTask);
  }

  openModal(modal) {
    modal.open();
  }

  closeModal(modal) {
    modal.close();
  }

  onClose() {
    swal({
      type: 'success',
      title: 'Success!',
      text: 'close it!',
    });
  }

}
export class List {
  text: string;
  editText: string;
  isOver: boolean;
  isEdit: boolean;
}

<div class="todolist-wrap">
  <div class="form-group" style="margin-bottom:7px">
    <input type="text" class="new-task-input" [(ngModel)]="newTaskText" (keyup.enter)="creatNewTask()">
    <button class="btn btn-primary" (click)="creatNewTask()">
      <i class="fa fa-plus"></i>
    </button>
  </div>
  <div class="form-group task-list" *ngFor="let item of todolist;let i = index">
    <button class="over-btn" (click)="overMatter(i)" *ngIf="!item.isEdit">
      <i class="fa fa-square-o" *ngIf="!item.isOver"></i>
      <i class="fa fa-check-square-o" *ngIf="item.isOver"></i>
    </button>
    <label class="list-text" [ngClass]="{'list-over':item.isOver,'list-text':!item.isOver}" (dblclick)="edit(i)" *ngIf="!item.isEdit"
      title="{{item.title}}">{{item.title}}</label>
    <button class="btn btn-primary" (click)="openModal(myModal)">open my modal</button>
    <input type="text" class="edit-input" [(ngModel)]="item.editText" *ngIf="item.isEdit" (keyup.enter)="enterTaskEdit(i)">
    <button class="enter-task-edit" *ngIf="item.isEdit" (click)="enterTaskEdit(i)">
      <i class="fa fa-check"></i>
    </button>
    <button class="cancel-task-edit" *ngIf="item.isEdit" (click)="cancelTaskEdit(i)">
      <i class="fa fa-close"></i>
    </button>

    <modal #myModal>
      <modal-header>
        <h3>Modal header</h3>
      </modal-header>
      <modal-content>
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
          Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
          Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip
          quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </modal-content>
      <modal-footer>
        <button class="btn btn-primary" (click)="closeModal(myModal)">close</button>
      </modal-footer>
    </modal>
  </div>
</div>

Вот простой код моих компонентов toDoList, я пытался открыть модальную панель в Dashboard, где я включил свои компоненты toDoList и другие компоненты, но когда я нажимаюкнопка приложение зависает и все перестает работать.

Можете ли вы помочь мне с этим?

Answer 1

Спасибо за все,

Это был вызов моих компонентов

    <div class="col-md-4">
    <card cardTitle="Todo List" isCollapse="true">
      <du-todolist></du-todolist>
    </card>
  </div>
  <div class="col-md-6">
    <card>
      <profile></profile>
    </card>
  </div>

Я перешел за пределы балис-карты, и модал теперь работает!

<div class="col-md-4">
    <du-todolist></du-todolist>
  </div>

  <div class="col-md-6">
    <card>
      <profile></profile>
    </card>
  </div>
  <div class="col-md-6">
    <card>
      <weather></weather>
    </card>
  </div>

Answer 2

Вот пример модального вызова в угловой начальной загрузке.Я создал стек для вас.Вы можете использовать эту логику для своего приложения.

https://stackblitz.com/edit/angular-bootstrap-modal-muthu

HTML

<button id="openModalButton" data-toggle="modal" data-target="#exampleModal">Open Modal</button>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
           <h5> Welcome to Muthukumar Demo Page</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
             <h1> Hello World! Muthukumar is trying to became Full Stack Developer..</h1>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>