다른 형제 구성 요소의 모달 구성 요소 토글

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); 
    }  
}

이 두 가지 구성 요소 부모 - 자식 관계가 없습니다. 이 모달을 토글 할 수 있어야하는 다른 많은 구성 요소가 있기 때문에이 접근 방식을 구현해야합니다.

출처

2017-10-22 Achira Shamal

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service에 구성 요소를 추가했다 –

또한 당신은 아마 안 라이프 사이클 메소드를 수동으로 호출합니다. 모달이 다른 공용 메소드로 다시 열릴 때마다 재사용되는 것을 제외하십시오. – jonrsharpe

그 (것)들을 얻지 않았다 –

위의 코드가 작동합니다. 난 그냥 html 코드

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

출처

2017-10-23 09:50:03

다른 형제 구성 요소의 모달 구성 요소 토글

답변

관련 문제