[英]display modal component from other component on Angular 2
I'm pretty new to angular, and I have a modal component with a button, on (click)
changes the status of the modal from hide to show and it's displayed. 我对angular还是很陌生,我有一个带有按钮的模态组件,
(click)
将模态的状态从hide更改为show并显示它。 however, I want to include this modal on my main component, so I can create a button which displays the modal component over the main component. 但是,我想将此模态包括在我的主要组件中,因此我可以创建一个在主要组件上显示模态组件的按钮。
this is my modalLink.ts: 这是我的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';
}
}
and on my mainComponent.ts this is an excerpt of what I have: 在我的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();
}
}
and my mainComponent.html which contains the button that calls the asdf function that calls showModal(): 还有我的mainComponent.html ,其中包含调用asdf函数的按钮,该函数调用showModal():
<div class="container-organize resource-content">
<button (click)="asdf()" class="btn-floating btn-large btn-new-resource"><i class="ai ai-plus"></i></button>
For your situation, you should consider of taking advantage of Angular-Material
. 对于您的情况,您应该考虑利用
Angular-Material
。 Angular Material have implement this for you, just use it this way: Angular Material为您实现了此功能,只需按以下方式使用它:
import {MdDialog} from '@angular/material';
constructor(public dialog: MdDialog) {}
openDialog() {
this.dialog.open(DialogOverviewExampleDialog); // DialogOverviewExampleDialog is another component
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.