加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

ng2-bootstrap在Angular 2中不起作用(‘alert’不是已知元素:)

发布时间:2020-12-18 00:29:04 所属栏目:安全 来源:网络整理
导读:我通过以下方式在运行Angular 2.0.1的项目上安装了ng2-bootstrap: npm install ng2-bootstrap --save 我设置了这样的项目: //systemjs.config.js (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' },// ma
我通过以下方式在运行Angular 2.0.1的项目上安装了ng2-bootstrap:
npm install ng2-bootstrap --save

我设置了这样的项目:

//systemjs.config.js
    (function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },// map tells the System loader where to look for things
        map: {
            'moment': 'node_modules/moment/moment.js','ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',// our app is within the app folder
            app: 'app',// angular bundles

和:

// app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AppComponent }  from './app.component';
import { ClientModule } from './client/client.module';

@NgModule({
    imports: [
       Ng2BootstrapModule

    ],declarations: [
       AppComponent
    ],schemas: [ CUSTOM_ELEMENTS_SCHEMA ],providers: [
        NotificationService,{ provide: LocationStrategy,useClass: HashLocationStrategy }
    ],bootstrap: [AppComponent]
})
export class AppModule { }

和:

// client.module.ts
import { Ng2BootstrapModule } from 'ng2-bootstrap';

@NgModule({
    imports: [
        Ng2BootstrapModule
    ],declarations: [

    ],providers: [

    ]
})
export class ClientModule { }

最后:

// client-info.component.ts
import { Component,OnInit,OnDestroy } from '@angular/core';
import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    selector: 'client-info',template: `
    <div >
        <alert type="success">hello</alert>
    </div>
    `,styleUrls: ['app/client/client.css']
})

export class ClientInfoComponent {
    constructor() {

    }

   ngOnInit(): void { }

   ngOnDestroy(): void {

    }
}

但在浏览网站时,我收到以下错误:

Unhandled Promise rejection: Template parse errors:
‘alert’ is not a known element:
1. If ‘alert’ is an Angular component,then verify that it is part of this >module.
2. If ‘alert’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the >’@NgModule.schemas’ of this component to suppress this message. (“

[ERROR ->]hello

我显然在这里做错了但是什么?

解决方法

app.module.ts应该是这样的.它对我很有帮助.
// app.module.ts
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ClientModule } from './client/client.module';
import { AlertModule } from 'ng2-bootstrap/components/alert';

@NgModule({
    imports: [
       Ng2BootstrapModule,AlertModule

    ],bootstrap: [AppComponent]
})
export class AppModule { }

并将client-info.component.ts更改为此

// client-info.component.ts
    import { Component,OnDestroy } from '@angular/core';
    import { AlertModule } from 'ng2-bootstrap/components/alert';


    @Component({
        selector: 'client-info',template: `
        <div >
            <alert type="success">hello</alert>
        </div>
        `,styleUrls: ['app/client/client.css']
    })

    export class ClientInfoComponent {
        constructor() {

        }

       ngOnInit(): void { }

       ngOnDestroy(): void {

        }

}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读