angular2 : 상위 구성 요소의 열린 ng2-bootstrap 모달

상위 구성 요소에서 ng2 부트 스트랩 모달을 열려고합니다. ModalComponent를 만들고 "exportAs : child"를 만들었습니다. 내 ModalComponent는angular2 : 상위 구성 요소의 열린 ng2-bootstrap 모달

import { Component, Input, ViewChild } from '@angular/core'; 
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap'; 

@Component({ 
    selector: 'modal', 
    moduleId: module.id, 
    templateUrl: 'modal.component.html', 
    styleUrls: ['modal.component.css'], 
    exportAs: 'child' 
}) 
export class ModalComponent { 

    @ViewChild('childModal') public childModal:ModalDirective; 

    public show(variant):void { 

     console.log(this.childModal); 
     this.childModal.show(); 
    } 

    public hide():void { 

     this.childModal.hide(); 
    } 
}

처럼 보인다 나는

<modal #c="child"></modal>

로 부모 템플릿의 모달을 포함 ... 내가 공격

<button type="button" class="btn btn-primary" (click)="c.show(variant)">open</button>

으로 부모 템플릿에서 부르는 " modalComponent 내부에서 "show"메서드를 제대로 사용할 수 있지만 "childModal"값은 항상 정의되지 않습니다 (Nb : console.log() 문).

모든 포인터는 크게 감사하겠습니다.

출처

2016-09-20 prime

'modal.component.html' 파일을 게시 할 수 있습니까? 그리고이 plunker을 확인 https://plnkr.co/edit/951NyF20qXudDtZo5OAx?p=preview – yurzui

고마워! 나는 당신의 plunker를 훑어 보았고 당신이 의심 할 때 나의 실수가 HTML에 있다는 것을 발견했다. 나는 아래의 해결책을 쓸 것이다. – prime

@yurzui 오늘 플러 커가 작동하지 않아서, * ng2-bootstrap *이 '

제 생각에는 구성 요소와 쿼리 모달 인스턴스를 통과해야하는 모달 API는 최적이 아닙니다. 훨씬 더 나은 접근법은 서비스로서 모달을 갖는 것입니다. 이 방법으로 코드의 임의의 위치 (서비스, 예 : 로그인 서비스 포함)에서 모달로 open 메소드를 호출 할 수 있습니다.

이것은 정확히 모달 용 API가 https://ng-bootstrap.github.io/#/components/modal의 서비스로 모델링 된 이유입니다. 이 도구를 사용하면 modalService.open(....)을 수행하여 의 임의의 위치에서 모달을 호출 할 수 있습니다.

참고로, modals에 대한 서비스 기반 접근법은 다른 Angular2 위젯 라이브러리 (예 : 머티리얼 디자인)에도 있습니다.

요약하면 사용중인 API를 다시 고려하십시오.

출처

2016-09-20 12:14:45

전적으로 동의합니다. 나는 ng2-bootstrap을 사용하고 있었지만 대부분의 다른 라이브러리가 모달 서비스를 제공하는 방식에 반대하여 저를 혼란스럽게 만들었습니다. – GFoley83

angular2 : 상위 구성 요소의 열린 ng2-bootstrap 모달

관련 문제