从另一个同级组件切换模态组件

Question

我需要从另一个组件调用一个组件的 ngOnInit 方法。我想要做的是，在来自另一个组件的点击事件上打开一个模式。

service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CustomerCreateneweventService {

  private subject = new Subject<any>();

     sendMessage(message: boolean) {
      console.log(message);
         this.subject.next(message);
     }

     clearMessage() {
         this.subject.next();
     }

     getMessage(): Observable<any> {
         return this.subject.asObservable();
     }
}

模态组件

import { Subscription } from 'rxjs/Subscription';
import { CustomerCreateneweventService } from '../../../services/customer/customer-createnewevent.service';

@Component({
              selector: 'app-customer-home-createnewevent',
              template: `
                <app-modal [(visible)]="newEventWindowOpen">
                    <h3 style="text-align: center">Create a new project</h3>      
                    <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal" (click)="newEventWindowOpen != newEventWindowOpen">Close</button>
                    </div>
                 </app-modal>
              `
            })


            export class CustomerHomeCreateneweventComponent implements OnInit {
              newEventWindowOpen: boolean;
              subscription: Subscription;

               constructor(private createNewService:CreateNewProjectService,private messageService: CustomerCreateneweventService) { 
                 this.subscription = this.messageService.getMessage().subscribe(
                   message => { this.newEventWindowOpen = message; });
               }
            }

我想从另一个组件切换此模式：

其他成分

import { Component, OnInit } from '@angular/core';
import { CustomerCreateneweventService } from '../../../services/customer/customer-createnewevent.service';

@Component({
  selector: 'app-customer-home-leftsidebar',
  template:  '<h4 (click)="toggleModal()">Toggle</h4>',
  styleUrls: ['./customer-home-leftsidebar.component.css']
})

export class CustomerHomeLeftsidebarComponent implements OnInit {

  constructor(private messageService: CustomerCreateneweventService) {}

  ngOnInit() {
  }

  toggleModal(){
    this.messageService.sendMessage(true);
  }    
}

这两个组件没有父子关系。我需要实施这种方法，因为还有许多其他组件应该能够切换相同的模式。

Answer 1

以上代码有效。我只需要将组件添加到 html 代码

<app-customer-home-createnewevent></app-customer-home-createnewevent>

从另一个同级组件切换模态组件

Toggle modal component from another sibling component

angular-components

angular