'模态'不是已知的元素:在angular2中

时间:2016-10-28 10:19:16

标签: angular typescript

我尝试在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;
                }
            })
    }
}

我的错误,      错误:模板解析错误:     &#39;模态&#39;不是一个已知的元素:     1.如果&#39;模态&#39;是一个Angular组件,然后验证它是否是此模块的一部分。     2.如果&#39;模态&#39;是一个Web组件,然后添加&#34; CUSTOM_ELEMENTS_SCHEMA&#34;到&#39; @ NgModule.schema&#39;此组件禁止此消息。 (&#34;              打开我的模态         [错误 - &gt;]                              

模态标题

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

3 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:0)

使用第三方组件&#34; ng2-bs3-modal&#34;时出现类似错误 没有构建错误,但在加载页面时,它没有加载它并显示
&#34;加载中&#34; 仅限消息。

解决方案是 1.从&#39; ng2-bs3-modal / ng2-bs3-modal&#39 ;;&#34;添加&#34;导入{Ng2Bs3ModalModule}。在app.module.ts中 2.添加&#34; Ng2Bs3ModalModule&#34;在@NgModule部分

下的导入部分

这一变化解决了这个问题。

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

答案 2 :(得分:0)

我也面临着同样的问题。 接下来是解决问题的步骤。

.npm安装ng2-modal

然后将 ModalModule 导入到导入:@ngModule部分