モーダル私にエラーを与える：プロパティを読み取ることができません未定義

Question

の「ショー」私は、Visual Studio 2015でAngular2でアプリをbuldingよ：両方が同じポップアップウィンドウを与えるメインページに2つのボタンがあります。私はこのモーダルのための別のコンポーネントを作ることになるまで、すべてがうまくいった。ボタンはまだメインページに残り、モーダルは別のコンポーネントにあります。しかし、今私はエラーがある：未定義のプロパティ 'ショー'を読むことができません！私のショー機能で。

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { ModalDirective } from 'ngx-bootstrap/modal'; 

@Component({ 
    selector: 'app-info-modal', 
    templateUrl: './info-modal.component.html', 
    styleUrls: ['./info-modal.component.scss'] 
}) 
export class InfoModalComponent implements OnInit { 

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

    constructor() { } 

    ngOnInit() { 
    } 
    showInfoModal =() => { 
    this.lgModal.show(); 
    }; 
} 

ここ

あるmodal.component.html：

<div bsModal #lgModal="bs-modal" [config]="{backdrop: 'static'}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 
    aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h2 class="modal-title pull-left">what is it about?</h2> 
     <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <p>content of the window.....</p> 
     </div> 
    </div> 
    </div> 
</div> 

メインページ成分HTMLでボタン：

<button class="btn-default btn pull-right next" (click)="showModal()"> privacy <i class="fa fa-fw fa-chevron-right"></i></button> 

ホームページcomponent.tsここ はmodal.component.tsあります：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.scss'] 
}) 
export class HomeComponent implements OnInit { 

    constructor(){ 

    } 

    ngOnInit() { 
    } 

    showModal() { 
    this.infoModal.showInfoModal(); 
    } 

誰にも分かりますか？私はどこで間違ったのか分かりません！

Answer 1

アップデート1あなたのViewChild参考のために、以下の

@ViewChild(ModalDirective) public lgModal:ModalDirective; 

を使用する必要があります：改訂された質問

に基づいて、あなたは以下のようにinfoModal refernceが欠落している、

export class HomeComponent implements OnInit { 
@ViewChild(InfoModalComponent) infoModal : InfoModalComponent; ////// missing declaration 

    ngOnInit() { 
    } 

    showModal() { 
    this.infoModal.showInfoModal(); 
    } 

注意：あなたはとしてそれを宣言する必要がありthis.infoModalを使用していると上記以外の場合は、HTML自体で使用することができます。

<button class="btn-default btn pull-right next" (click)="infoModal.showInfoModal()"> 
Show Information 
</button> 

<app-info-modal #infoModal> </app-info-modal>