在Angular 2上显示来自其他组件的模态组件答案

【问题标题】：display modal component from other component on Angular 2在Angular 2上显示来自其他组件的模态组件
【发布时间】：2017-09-02 06:05:15
【问题描述】：

我对角度很陌生，我有一个带有按钮的模态组件，(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>

【问题讨论】：

标签： javascript angular

【解决方案1】：

根据您的情况，您应该考虑利用Angular-Material。 Angular Material 已经为您实现了这个，只需这样使用它：

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

constructor(public dialog: MdDialog) {}

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

这里很简单plunker

【讨论】：