Question

我用过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>

join-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>。单击component.html。

Answer 1

这可能会有所帮助，您在服务中传递了对模式的引用，然后使用服务从将其注入到https://stackoverflow.com/a/55140862/10800899

的任何组件中打开/关闭它。

Answer 2

您可以使用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);
    }

不同组件上是否可能存在触发模态？

2 个答案: