ng2-bootstrapでモーダルを実装しようとするとエラーが発生する

Question

ng2-bootstrapでモーダルを実装しようとしていますが、このエラーが発生しました'Error：ApplicationRef instance not found'とわかりませんどうすれば修正できますか？

ng2-bootstrap、それはいくつかのハックを追加すると言いましたが、app.component.tsに設定しようとしましたが動作しません。

アドオンdomain.component.html

<!-- Large modal --> 
<button class="btn btn-primary" (click)="lgModal.show()">Large modal</button> 

<div bsModal #lgModal="bs-modal" 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"> 
     <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title">Large modal</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
    </div> 
    </div> 
</div> 

アドオンdomain.component.ts

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

@Component({ 
    selector: 'add-domain', 
    templateUrl: 'add-domain.component.html', 
}) 

export class AddDomainComponent { 
    private viewContainerRef: ViewContainerRef; 

    public constructor(viewContainerRef: ViewContainerRef) { 
    // You need this small hack in order to catch application root view container ref 
    this.viewContainerRef = viewContainerRef; 
     this.title = "Ajouter un domaine" 
    } 
} 

Answer 1

、あなたがviewContainerRefを追加する必要があり、そのhackを参照してください。 ：

class AppRoot { 
    private viewContainerRef: ViewContainerRef; 

    public constructor(viewContainerRef:ViewContainerRef) { 
    // You need this small hack in order to catch application root view container ref 
    this.viewContainerRef = viewContainerRef; 
    } 
} 

Answer 2

同じ問題がありました。それは

固定私の主成分で

// Fix to deal with modal error 
ComponentsHelper.prototype.getRootViewContainerRef = function() { 
    // https://github.com/angular/angular/issues/9293 
    if (this.root) { 
     return this.root; 
    } 
    var comps = this.applicationRef.components; 
    if (!comps.length) { 
     throw new Error("ApplicationRef instance not found"); 
    } 
    try { 
     /* one more ugly hack, read issue above for details */ 
     var rootComponent = this.applicationRef._rootComponents[0]; 
     //this.root = rootComponent._hostElement.vcRef; 
     this.root = rootComponent._component.viewContainerRef; 
     return this.root; 
    } 
    catch (e) { 
     throw new Error("ApplicationRef instance not found"); 
    } 
}; 

@Component({ 
    selector:  'intro', 
    template:  'template.html', 
    providers: [MyDataService] 
}) 

これを追加するこの問題に関する詳細と議論を探すここ==> https://github.com/valor-software/ng2-bootstrap/issues/986

Answer 3

は、以下のコードを試してみてください。それは私のために働いた。背景をfalseに変更します。

<div class="modal fade" bsModal #testModal="bs-modal" [config]="{backdrop: false}" ...>