Website-Suche

angular - 'modal' ist kein bekanntes Element: in angular2

Ich habe versucht, das Modell-Box in Angular2 zu verwenden, ich weiß, wie man es mit systemConfig.js benutzt, aber jetzt habe ich in meinem neuen Projekt webpack.js und ich bin mir nicht sicher, wie man es damit verwendet. Meine Komponente,

 import {Component,OnInit} from "@angular/core";
import {ModalModule} from "ng2-modal";
 import { Http, Headers } from '@angular/http';

@Component({
    selector: '[tables-basic]',
    template: `
<div class="row">
    <button (click)="myModal.open()">open my modal</button>
    <modal #myModal>
        <modal-header>
            <h1>Modal header</h1>
        </modal-header>
        <modal-content>
            Hello Modal!
        </modal-content>
        <modal-footer>
            <button class="btn btn-primary" (click)="myModal.close()">close</button>
        </modal-footer>
    </modal>
</div>
    `
})
export class TablesBasic implements OnInit {
  students:any;
  constructor(public http: Http) {


    }
    ngOnInit() {
       this.getstudents();
    }
     getstudents() {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json')
        this.http.get('http://localhost:3009/api/auth/getstudents', { headers: headers })
            .subscribe(
            result => {
                if (result.json().error_code == 0) {
                   this.students = result.json().result;
                }
                else {
                    this.students = result.json().result;
                }
            })
    }
}

Modales Kopfzeile

mein Fehler, Fehler: Template-Parsing-Fehler: 'modal' ist kein bekanntes Element: 1. Wenn 'modal' eine Angular-Komponente ist, dann überprüfen Sie, ob es Teil dieses Moduls ist. 2. Wenn 'modal' eine Web-Komponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' zum '@NgModule.schema' dieser Komponente hinzu, um diese Meldung zu unterdrücken. (" öffne mein Modal [FEHLER ->] Kann mir bitte jemand helfen?

Antwort #1

Sie müssen ModalModule in Ihrer AppModule-Datei importieren und ModalModule innerhalb von @NgModule.imports wie unten gezeigt hinzufügen:

import {ModalModule} from "ng2-modal";
@NgModule({
    imports: [
        // ...
        ModalModule
    ],
    declarations: [
        App,
        TablesBasic
    ],
    bootstrap: [
        App
    ]
})
export class AppModule {
}

Antwort #2

Ich hatte ebenfalls dasselbe Problem. Folgen Sie den unten genannten Schritten, um das Problem zu lösen.

.npm install ng2-modal

dann importiere ModalModule in den imports:-Abschnitt von @ngModule

Verwandte Artikel