0

我用过mdbootstrap。我有两个组件 MenuComponent 和 JoinClassComponent。我正在搜索单击 MenuComponent 上的链接时触发 JoinClassComponent 上的模态对话框的方法。这是我对上述组件的 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>

我想显示单击 menu.component.html 的时间#basicModal。<a class="dropdown-item waves-light" href="#" mdbWavesEffect (click)="joinClass()">Join class</a>

4

2 回答 2

0

这可能会有所帮助，您在服务中传递对模式的引用，然后使用该服务从您将其注入到https://stackoverflow.com/a/55140862/10800899的任何组件中打开/关闭它

于 2019-03-15T06:37:35.120 回答
0

您可以使用 rxjs 创建一个服务subject并在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);
    }
于 2019-03-15T12:20:27.837 回答