2

親コンポーネントから ng2-bootstrap モーダルを開こうとしています。ModalComponent を作成し、「exportAs: child」を作成しました。私の ModalComponent は次のようになります

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() ステートメント)。

どんなポインタでも大歓迎です。

4

3 に答える 3