从角度2上的其他组件显示模态组件

我很新的角度，我有一个模式组件与一个按钮，在(click)更改模态的状态从隐藏到显示，它的显示。然而，我想在我的主要组件上包含这个模式，所以我可以创建一个按钮，在主组件上显示模态组件。从角度2上的其他组件显示模态组件

这是我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>

来源

2017-04-07 Miguelopezv

对于您的情况，您应该考虑利用Angular-Material。角材料具有实现这个给你，只是用这种方式：

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

constructor(public dialog: MdDialog) {} 

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

这里简单plunker

来源

2017-04-07 02:01:43 Pengyy

从角度2上的其他组件显示模态组件

回答

相关问题