Возможны ли модальные триггеры, которые находятся на разных компонентах? - PullRequest
0 голосов
/ 15 марта 2019

Я использовал mdbootstrap . У меня есть два компонента MenuComponent и JoinClassComponent. Я ищу способ вызвать модальное диалоговое окно, которое находится на JoinClassComponent при нажатии на ссылку на MenuComponent. Вот мой HTML для вышеупомянутых компонентов.

Menu.component.hmtl

<header style="padding-bottom: 90px;">
  <nav class="navbar fixed-top navbar-expand-lg scrolling-navbar Red lighten-5">
    <a class="navbar-brand" href="/"><strong>Campus Assessment System</strong></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto nav-flex-icons">
        <li class="nav-item dropdown btn-group" dropdown>
          <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light caret-off" mdbWavesEffects>
            <i class="fas fa-plus"></i>
          </a>
          <div *dropdownMenu class="dropdown-menu dropdown dropdown-menu-right dropdown-primary" role="menu">
            <a class="dropdown-item waves-light" href="#" mdbWavesEffect (click)="joinClass()">Join class</a>
            <a class="dropdown-item waves-light" href="#" mdbWavesEffect>Create class</a>
          </div>
        </li>
        <li class="nav-item avatar dropdown" dropdown>
          <a dropdownToggle class="nav-link dropdown-toggle waves-effect waves-light caret-off">
            <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" class="img-fluid rounded-circle z-depth-0" style="height:30px;">
          </a>
          <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
            <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
            <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
            <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
            <div class="divider dropdown-divider"></div>
            <a class="dropdown-item waves-light" mdbWavesEffect href="#" (click)="logout()">Logout</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>
<app-join-class></app-join-class>

нарисуй class.component.html

<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
      </div>
    </div>
  </div>
</div>

Я хочу показать #basicModal при нажатии <a class="dropdown-item waves-light" href="#" mdbWavesEffect (click)="joinClass()">Join class</a> на menu.component.html.

Ответы [ 2 ]

0 голосов
/ 15 марта 2019

Вы можете создать сервис с subject из rxjs и подписаться на него в join-class.component.ts .и когда нажата <a class="dropdown-item waves-light" href="#" mdbWavesEffect (click)="joinClass()">Join class</a>, отправьте значение субъекту.когда вы отправляете значение в тему.Это значение будет автоматически отправлено абоненту этого субъекта .Ниже приведен пример, который даст вам идею

Создать сервис и добавить свойство.

  private openPopup = new Subject<boolean>(false); 

    get getOpenPopupSubscription() {
        return this.loggedIn.asObservable();  
    }

   OpenPopup(state: boolean) {
    this.loggedIn.next(state);
   }

В файле join-class.component.ts

  openPopupSubscription: Subscription;

     ngOnInit() {

         this.openPopupSubscription = 
         this.popUpService.getOpenPopupSubscription.subscribe(data => {

             if(data){
             // put your logic to open the popup
             } 
           });
      }

    joinClass(){
      this.popUpService.OpenPopup(true);
    }
0 голосов
/ 15 марта 2019

Это может помочь, вы передаете ссылку на модальное имя в сервисе, а затем используете сервис, чтобы открыть / закрыть его из любого компонента, которому вы ввели его, на https://stackoverflow.com/a/55140862/10800899

...