1
모서리가 새롭고 버튼이있는 모달 구성 요소가 있습니다. (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>