Angular показать модал во вложенном компоненте - PullRequest
Новая
       7

Angular показать модал во вложенном компоненте

0 голосов
/ 14 ноября 2018

все.

У меня есть компонент, который контролирует добавление новой записи.Добавление записи обрабатывается формой внутри модальной.Я хотел бы нажать на кнопку, которая затем откроет модальные и получить данные от пользователя.Когда они нажимают кнопку «сохранить» внутри модального окна, этот компонент управляет отправкой данных на сервер через службу.

Я выбрал метод включения директивы для добавления записи в HTMLдля app.component: 

<div id="list">
  <div style="padding-bottom: 1em">
    <h2>List of Events:</h2>
  </div>

  <app-calendar></app-calendar>

  <p style="margin-top: 20px"><button class="btn btn-primary" data-model="modal" data-target="#exampleModal">Add Event</button></p>
</div>

<div id="details">
    <add-event></add-event>
</div>

Календарь приложений извлекает события и отображает их в виде списка.Это отлично работает.Компонент add-event имеет пример модального кода из getbootstrap в своем шаблоне: 

<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 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </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>

Проблема в том, что нажатие кнопки ничего не делает, и в консоли нет ошибок.Чего мне не хватает?Я ожидал, что, используя свойство ID, я смогу взаимодействовать с шаблоном add-event.Нужно ли импортировать компонент add-event, а затем отправить ему сообщение, чтобы вместо этого показать модальное?Как это будет выглядеть?Я попытался связать [hidden] со свойством в add-event и привязал событие (click) на кнопке к вызову функции в add-event, которая изменила свойство с true на false, но это тоже не сработало. 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'event-detail',
  templateUrl: './event-detail.component.html',
  styleUrls: ['./event-detail.component.css']
})
export class EventDetailComponent {
  isHidden;

  constructor() {
    this.isHidden = true;
  };

  showDetailModal() {
    this.isHidden = false;
  };
}

В этом случае я устанавливаю переменную шаблона.

...