NG-ブートストラップは、

Question

が、私はそうのようなモーダルをレンダリングしようとしているのレンダリングではありません私はそれを働かせる方法がわからないのはなぜですか？文書は曖昧です。助言？

私は次のことを試してみました：

@Component({ 
    selector: 'edit-profile', 
    templateUrl: './editProfile.html' 
}) 
export class EditProfileComponent{ 

    closeResult: string; 

    constructor(private modalService: NgbModal){ } 

    open(content) { 
     this.modalService.open(content).result.then((result) => { 
      this.closeResult = `Closed with: ${result}`; 
     }, (reason) => { 
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
     }); 
    } 

    private getDismissReason(reason: any): string { 
     if (reason === ModalDismissReasons.ESC) { 
      return 'by pressing ESC'; 
     } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { 
      return 'by clicking on a backdrop'; 
     } else { 
      return `with: ${reason}`; 
     } 
    } 

} 

HTML：コンソールで

<a (click)="open(content)" class="btn btn-success text-uppercase">Edit My Profile</a> 
</div> 

エラー私はボタンをクリックします。

ERROR TypeError: _co.open is not a function 
    at Object.eval [as handleEvent] (ProfileComponent.html:46) 
    at handleEvent (core.es5.js:12047) 
    at callWithDebugContext (core.es5.js:13508) 
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13096) 
    at dispatchEvent (core.es5.js:8659) 
    at core.es5.js:9270 
    at HTMLAnchorElement.<anonymous> (platform-browser.es5.js:2668) 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) 
    at Object.onInvokeTask (core.es5.js:3924) 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 

私が見てきたがプランナーの例私はそれらを実装するとき、私のアプリを壊すようです。 app.moduleにコンポーネントと依存関係を追加しました。

アドバイス？

Answer 1

モーダルを表示しようとしている場合は、角度でブートストラップを直接使用することができます。だから、同様

NPMは、第三者をインポートする方法の詳細情報については

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ], 
    "scripts": ["../node_modules/jquery/dist/jquery.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
    ], 

COMPONENT

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

declare var $ :any; 

@Component({ 

の角度-cli.jsonでは、ブートストラップ--save

をインストールlib LINK

作業モード - LINK。

作業モードのソースコードを確認する場合はLINKです。

Answer 2

ワーキングPlunkerリンク：http://plnkr.co/edit/vTY9gG9QcL25Wm9NTBqS?p=preview

1）あなたのapp.module.tsで、あなたはEditProfileComponent宣言されていませんように見えます。インポートの代わりに、EditProfileComponentを宣言に入れます。あなたのコンポーネントがよさそうだ

@NgModule({ 
    imports: [BrowserModule,HttpModule, 
RouterModule.forRoot(appRoutes), NgbModule.forRoot()], 
    declarations: [App, EditProfileComponent] 
    bootstrap: [App] 
}) 

2）：あなたのHTMLの編集profile.htmlで

import {Component} from '@angular/core'; 
    import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; 

    @Component({ 
     selector: 'edit-profile', 
     templateUrl: './editProfile.html' 
    }) 
    export class EditProfileComponent { 
     closeResult: string; 

     constructor(private modalService: NgbModal) {} 

     open(content) { 
     this.modalService.open(content).result.then((result) => { 
      this.closeResult = `Closed with: ${result}`; 
     }, (reason) => { 
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
     }); 
     } 

     private getDismissReason(reason: any): string { 
     if (reason === ModalDismissReasons.ESC) { 
      return 'by pressing ESC'; 
     } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { 
      return 'by clicking on a backdrop'; 
     } else { 
      return `with: ${reason}`; 
     } 
     } 
    } 

3）、あなたは次のようになりngのテンプレートが欠落しているように見える以下のコードを参照してください。モーダル表示を参照してください。

「a」タグをクリックすると、関数に 'content'が渡されます。この 'content'はhtmlのテンプレートへのローカル参照です。 コンポーネントの特定のモーダルを開くには、 'NgbModal'のインスタンス 'this.modalService'を使用します。

<ng-template #content let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
    <h4 class="modal-title">Modal title</h4> 
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body&hellip;</p> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> 
    </div> 
</ng-template> 


<a (click)="open(content)" class="btn btn-success text-uppercase">Edit My Profile</a>