我尝试使用ng2-bootstrap实现模态时出错

时间:2016-12-19 18:22:49

标签: angular typescript ng2-bootstrap

我试图用ng2-bootstrap实现一个模态,但是我收到了这个错误'错误:找不到ApplicationRef实例' 而且我不知道我知道如何解决它。

ng2-bootstrap,它说要添加一些黑客,我试着在app.component.ts上设置它,但它不起作用。

enter image description here

添加-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"
  }
}

3 个答案:

答案 0 :(得分:0)

查看他们的hack,您需要添加viewContainerRef:

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;
  }
}

答案 1 :(得分:0)

有同样的问题。在我的主要组件中添加它修复它

// 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]
})

在此处查找有关此问题的详细信息和讨论==&gt; https://github.com/valor-software/ng2-bootstrap/issues/986

答案 2 :(得分:0)

尝试以下代码。它对我有用。将背景更改为false。

    void reverseit(char arr[])
    {
    int len= strlen(arr);   

    for(int i=0; i<=len/2; i++) 
        {
                char temp=arr[i];
                arr[i]=arr[len-i];
                arr[len-i]=arr[i];
        }
}
    int main()
    {
    char arr[100]={};
    cout<<"enter words:  ";
    cin.get(arr,100);
    reverseit(arr);
    cout<<arr;
    }