Modal未在Angular2

Question

我正在尝试在Angular2应用程序中打开引导程序对话框。当我点击按钮打开它时，它工作正常，但当我尝试从组件打开它时，它不工作并显示错误＆＃34;属性ModalComponent＆＃34上不存在属性打开的doest 34;，

以下是我的代码，其中有效，

<button type="button" (click)="modal.open()" class="btn btn-default">Open me!</button>

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        <input type="text" placeholder="Id" />
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

我想从组件打开它，下面是我的代码，不工作。

import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { Search } from '../model/Search';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
    selector: 'searchGrid',
    template: require('./searchGrid.component.html')
})
export class SearchGridComponent {
    @Input() Data: Search[] = [];
    search: Search;
    //modal: ModalComponent;

    @ViewChild('modal')
    modal: ModalComponent;

    public EditEntry(data) {
        console.log(data);
        this.modal.open();
    }

我的HTML，

    <table class="table table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>Order Code</th>
                <th>Id</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let dt of Data">
                <td>
                    <span>
                        <input type="button" value="Edit" (click)="EditEntry(dt)" />
                    </span>
                </td>
                <td>{{dt.orderCode}}</td>
                <td>{{dt.id}}</td>
            </tr>
        </tbody>
    </table>

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        <input type="text" placeholder="Id" />
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>