각도 2의 다른 구성 요소에서 모달 구성 요소를 표시합니다.

Question

모서리가 새롭고 버튼이있는 모달 구성 요소가 있습니다. (click) 모달 상태가 숨기기에서 표시로 변경되어 표시됩니다. 그러나이 모달을 내 주 구성 요소에 포함하고 싶습니다. 따라서 주 구성 요소 위에 모달 구성 요소를 표시하는 단추를 만들 수 있습니다.

이 내 modalLink.ts입니다 :

import { Component,Input,trigger,state,style,transition,animate } from '@angular/core'; 

@Component({ 
    templateUrl: 'modalLink.component.html', 
    styleUrls: ['modalLink.component.css'], 
    animations:[ 
     trigger('Modal',[ 
      state("show",style({'display':'flex', 'opacity':'1'})), 
      state("hide",style({'display':'none', 'opacity':'0'})), 
      transition("show <=> hide", animate("200ms")) 
     ]) 
    ] 
}) 

export class ModalLink { 
    private url:string = ''; 
    private modal:string = 'hide'; 

    private objectArea:any = [] 

    private objectLevel:any = [] 

    showModal(){ 
     this.modal = 'show'; 
    } 

    hideModal(){ 
     this.modal = 'hide'; 
    } 

} 

내 mainComponent.ts에이 내가 가진 무엇을 발췌 한 것입니다 :

import { ModalLink } from './modalLink.component'; 

@Component({ 
    templateUrl: 'academy.component.html', 
    styleUrls: ['academy.component.css'] 
}) 

export class AcademyComponent { 

    @ViewChild(ModalLink) modalLink: ModalLink 

    asdf() { 
     this.modalLink.showModal(); 
     } 

} 

가 내 mainComponent.html에는 showModal()을 호출하는 asdf 함수를 호출하는 버튼이 있습니다.

<div class="container-organize resource-content"> 
<button (click)="asdf()" class="btn-floating btn-large btn-new-resource"><i class="ai ai-plus"></i></button> 

Answer 1

상황에 따라 Angular-Material을 고려해야합니다. 각도 재질 그냥 이런 식으로 사용, 당신을 위해이를 구현이 : 여기

import {MdDialog} from '@angular/material'; 

constructor(public dialog: MdDialog) {} 

openDialog() { 
    this.dialog.open(DialogOverviewExampleDialog); // DialogOverviewExampleDialog is another component 
} 

은 간단하다 plunker