ng2-bootstrap модал не могу открыть модал

angular bootstrap-modal

1183 просмотра

1 ответ

180 Репутация автора

у меня есть pizza.component.ts, как это

import {Component,ViewContainerRef} from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'pizza-com',
  templateUrl: './app/pizza/pizza.html',
  directives: [BUTTON_DIRECTIVES,MODAL_DIRECTIVES,CORE_DIRECTIVES],
  viewProviders:[BS_VIEW_PROVIDERS],
})
export class PizzaComponent {
    public constructor(viewContainerRef:ViewContainerRef) {
    // You need this small hack in order to catch application root view container ref
    this.viewContainerRef = viewContainerRef; <<<---this doesn't seems to work dunno why
  }
}

и мой pizza.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>

когда я нажимаю модальную кнопку, это показывает ошибку

platform-browser.umd.js:1900 
EXCEPTION: Error: Uncaught (in promise): 
TypeError: Cannot read property 'parentInjector' of undefined

что-нибудь, что я сделал не так?

я также следую примеру в ng2-bootstrap, но this.viewContainerRef не работает

Автор: Rommy Источник Размещён: 18.07.2016 10:24

Ответы (1)


0 плюса

69 Репутация автора

Я использую Angular 2 Final / ng2-bootstrap 1.1.3 / systemjs

import { Component, ViewContainerRef } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  private viewContainerRef: ViewContainerRef;

  constructor(viewContainerRef: ViewContainerRef) {
    this.viewContainerRef = viewContainerRef;
  }
}
Автор: Le Dang Duong Размещён: 13.03.2017 01:03
Вопросы из категории :
32x32