如何从一个角度分量完全倍数组件的页面打开一个模式

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

我试图从一个角度分量启动我的模式在页面由多个部分组成，但不幸的是我的应用程序停止工作，并申请获得freezed.

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

这里是在引导角的例子的模态调用。我创建stackblitz你。您可以使用此逻辑应用程式。

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>

Answer 2

感谢对所有的，

这是我的组件的调用

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