2016-10-28 17 views
3

angular2でモデルボックスを使用しようとしましたが、これはsystemConfig.jsで使用することがわかりましたが、今は新しいプロジェクトでwebpack.jsがあります。それと一緒に使用してください。 私のコンポーネント、'modal'は既知の要素ではありません:angular2

import {Component,OnInit} from "@angular/core"; 
import {ModalModule} from "ng2-modal"; 
import { Http, Headers } from '@angular/http'; 

@Component({ 
    selector: '[tables-basic]', 
    template: ` 
<div class="row"> 
    <button (click)="myModal.open()">open my modal</button> 
    <modal #myModal> 
     <modal-header> 
      <h1>Modal header</h1> 
     </modal-header> 
     <modal-content> 
      Hello Modal! 
     </modal-content> 
     <modal-footer> 
      <button class="btn btn-primary" (click)="myModal.close()">close</button> 
     </modal-footer> 
    </modal> 
</div> 
    ` 
}) 
export class TablesBasic implements OnInit { 
    students:any; 
    constructor(public http: Http) { 


    } 
    ngOnInit() { 
     this.getstudents(); 
    } 
    getstudents() { 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/json') 
     this.http.get('http://localhost:3009/api/auth/getstudents', { headers: headers }) 
      .subscribe(
      result => { 
       if (result.json().error_code == 0) { 
        this.students = result.json().result; 
       } 
       else { 
        this.students = result.json().result; 
       } 
      }) 
    } 
} 

私の誤り、 エラー:テンプレートの解析エラー: 「モーダル」ではない知られている要素がある:「モーダル」は角度成分である場合 は1、それはの一部であることを確認このモジュール 2. 'modal'がWebコンポーネントの場合は、このコンポーネントの '@ NgModule.schema'に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを表示しないようにします。 。:

モーダルヘッダー

は誰も私を助けて提案してくださいすることができ

+0

を参照することができます。 modalモジュールのドキュメントには、その使用方法が説明されていなければなりません。 –

答えて

2

をあなたのAppModuleファイルにModalModuleをインポートし、以下のように@NgModule.importsModalModuleを追加する必要がありますする必要があります - (」 は私のモーダル [> ERROR]を開きますそこにはビルドエラーがなかったけど 「NG2-BS3峰」サードパーティのコンポーネントを使用している間、私は同様のエラーが発生しました

import {ModalModule} from "ng2-modal"; 
@NgModule({ 
    imports: [ 
     // ... 
     ModalModule 
    ], 
    declarations: [ 
     App, 
     TablesBasic 
    ], 
    bootstrap: [ 
     App 
    ] 
}) 
export class AppModule { 
} 
0

のロード中ページ、それをロードせずに表示
"読み込み中..." メッセージのみ。

溶液を 1追加 " 'NG2-BS3モーダル/ NG2-BS3モーダル' からインポート{Ng2Bs3ModalModule};" でありますin app.module.ts 2. @ NgModule部分のインポートセクションに "Ng2Bs3ModalModule"を追加します

この変更により、この問題は解決されました。

また、あなたはおそらく、あなたのルートNgModuleの輸入にモーダルモジュールを追加するのを忘れ https://github.com/dougludlow/ng2-bs3-modal/issues/124

関連する問題