他の兄弟コンポーネントのモーダルコンポーネントを切り替えます

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>