Es gibt keine Direktive mit "exportAs" für ng2-bootstrap

Question

Ich versuche, das ng-2 Bootstrap Modal in meinem Code arbeiten zu lassen. Ich habe bereits den ng2-bootstrap tooltip zum laufen gebracht, keine Probleme, aber das Modal gibt mir eine Menge Ärger. Ich habe alle relevanten GitHub-Seiten und Stackover-Flow-Fragen überprüft, aber ich kann es immer noch nicht herausfinden. dies ist mein Setup:

Mein router.html (die Vorlage)

... 
<div class="modal fade" alertModal #staticModal="alert-modal" role="dialog" aria-labelledby="alertModal">` 

<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <h3 class="modal-title" id="alertModalTitle"></h3> 
     </div> 
     <div class="modal-body" id="alertModalBody"> 

     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div> 
</div> 
... 

Teil meiner app.module.ts:

import { TooltipModule,ModalModule } from 'ng2-bootstrap'; 
@NgModule({ 
    imports: [ModalModule.forRoot(), TooltipModule.forRoot(), ...], 
    declarations: [AppComponent,...], 
    bootstrap: [AppComponent], 
    providers: [...] 
}) 
export class AppModule {} 

Mein app.component.ts dass diese modal verwendet :

import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { MultistepService, StepDirection } from '../service/multistep.service'; 
import { ModalDirective } from 'ng2-bootstrap'; 

@Component({ 
    selector: 'my-app', 
    host: { 
     'class': 'container-fluid' 
    }, 
    templateUrl: './app/component/router.html' 
}) 

export class AppComponent implements OnInit { 

    @ViewChild('staticModal') 
    private alertModal:ModalDirective; 

    <some methods here> 
} 

Dies ist der Fehler, den ich immer bin:

Template parse errors: 
There is no directive with "exportAs" set to "alert-modal" 

Gibt es etwas, was mir fehlt? Danke im Voraus!

Answer 1

In der ersten Zeile der Vorlage, Für diesen Teil #staticModal

Answer 2

#staticModal="alert-modal" ändern:

<div class="modal fade" alertModal #staticModal="alert-modal" 

gibt es eine Richtlinie alertModal angewendet. Sie versuchen, es in der Komponente zuzugreifen:

@ViewChild('staticModal') private alertModal:ModalDirective; 

Es besteht jedoch keine Notwendigkeit Vorlage Referenzgröße staticModal einzuführen, können Sie die Richtlinie direkt von Klasse zugreifen:

@ViewChild(ModalDirective) private alertModal:ModalDirective; 

Die Vorlage Referenz Variable staticModal wäre erforderlich, wenn Sie die Instanz von ModalDirective an einem anderen Ort in html verweisen wollen:

<div class="modal fade" alertModal #staticModal="alertModal"... 
<span>{{staticModal.someProperty}}</span> 

jedoch dafür die ModalDirective Klasse zu arbeiten hat exportAs im Dekorateur wie folgt zu definieren:

@Directive({ 
    exportAs: "alertModal"