首页 文章

'modal'不是已知元素：在angular2中

提问于
浏览 次
3

我尝试在angular2中使用模型盒，我知道锄头与systemConfig.js一起使用但现在在我的新项目中我有webpack.js，我不知道如何使用它 . 我的组件，

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

我的错误，错误：模板解析错误：'modal'不是已知元素：1 . 如果'modal'是Angular组件，则验证它是否是此模块的一部分 . 2.如果'modal'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@NgModule.schema'以禁止显示此消息 . （“打开我的模态[错误 - >]

模态 Headers

任何人都可以建议我帮忙 .

angular typescript

2 回答

  • 4

    您需要在 AppModule 文件中导入 ModalModule ，并需要在 @NgModule.imports 中添加 ModalModule ，如下所示：

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

    我在使用第三方组件时出现类似错误"ng2-bs3-modal"没有构建错误，但在加载页面时，它没有加载它并显示
    仅限"Loading…"消息 .

    解决方案是1.从'ng2-bs3-modal / ng2-bs3-modal'添加“import {Ng2Bs3ModalModule”;“在app.module.ts 2.在@NgModule部分下的导入部分添加“Ng2Bs3ModalModule”

    这种变化解决了这个问题 .

    你也可以参考https://github.com/dougludlow/ng2-bs3-modal/issues/124

    回复于

相关问题