![](/img/trans.png)
[英]How to open a bootstrap modal window from other component in Angular 8?
[英]display modal component from other component on Angular 2
我對angular還是很陌生,我有一個帶有按鈕的模態組件, (click)
將模態的狀態從hide更改為show並顯示它。 但是,我想將此模態包括在我的主要組件中,因此我可以創建一個在主要組件上顯示模態組件的按鈕。
這是我的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 ,其中包含調用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>
對於您的情況,您應該考慮利用Angular-Material
。 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.